如何破解不支持的mix-blend-mode CSS属性？

Question

我正在编辑图像库,具有特定的悬停效果.当用户访问图像时,我使用::在伪元素之前使用mix-blend-mode CSS属性在div上创建"窗帘":

div.img::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    mix-blend-mode: soft-light;
    background-color: red;
}

产生的效果是这样的:

但不幸的是,IE(以及其他一些根据caniuse)不支持此属性并在图像上显示完整的红色矩形,因此它不可见.

是否有可能破解这种混合混合模式行为,就像在Firefox或Chrome中一样？

如果没有,是否可以隐藏覆盖div或仅当 - 如果不支持mix-blend-mode时将其设置为半透明？

谢谢

Answer 1

我知道这是一个老问题,但您也可以使用@supports功能查询来检测某个属性是否可用.

@supports not (mix-blend-mode: multiply) {
  .image {
    ...
  }
}

如果您有兴趣,可以在以下网址阅读有关功能查询的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Answer 2

如果您不想使用普通不透明度作为后备:

跨浏览器支持的方法

Javascript polyfill 这将很慢,并且不允许您轻松制作动画.但是,它可以让您为每个匹配的图像创建一个替代图像,然后您可以淡化不透明度或在两者之间执行其他CSS过渡技巧.

http://codepen.io/brav0/pen/bJDxt(不是我的笔 - 使用乘法,而不是柔和的光线)

服务器端处理 不是我的首选,但如果您控制服务器端代码,则可以使用服务器端映像库(GD等)准备备用映像

仅启用支持浏览器的效果

用于检测IE的Css hacks

@media screen { @media (min-width: 0px) {
    div.img::after{ ... }
} }

使用JavaScript

if (window.getComputedStyle(document.body).mixBlendMode !== undefined)
    $("div.img").addClass("curtain");

......和CSS ......

img.curtain::after { ... }