如何破解不支持的混合混合模式 CSS 属性？

Question

我正在编写具有特定悬停效果的图片库。当用户看到图像时，我使用 ::before 伪元素使用 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 填充 这会很慢，并且不允许您轻松制作动画。但是，它可以让您为每个匹配的图像创建一个备用图像，然后您可以淡化不透明度或在两者之间执行其他 CSS 过渡技巧。

http://codepen.io/brav0/pen/bJDxt（不是我的笔 - 使用倍增，而不是柔光）

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

只开启支持浏览器的效果

用于检测 IE 的 Css hack

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