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

我正在编辑图像库,具有特定的悬停效果.当用户来到图像时,我使用::在伪元素之前使用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时将其设置为半透明？

谢谢

解决方法

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

跨浏览器支持的方法

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 { ... }