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

我正在为图片库编程，带有特定的悬停效果。当用户浏览图像时，我使用：：before pseudoelement在div上使用mix-blend-mode CSS属性创建“帘幕”：

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或将其设置为半透明

---

如果您不想使用纯不透明度作为后备方案，请感谢您：

跨浏览器支持的方法 Javascript polyfill 这将很慢，并且不允许轻松设置动画。但是，它将允许您为每个匹配图像创建一个备用图像，然后您可以淡入不透明度或在两者之间执行其他CSS转换技巧

（不是我的笔-使用倍增，而不是柔和的灯光）

服务器端处理 这不是我的第一选择，但如果控制服务器端代码，可以使用服务器端映像库（GD等）准备备用映像

仅为支持浏览器启用效果 检测IE的Css黑客

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

---

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

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

---

如果您感兴趣，可以在以下位置阅读有关功能查询的更多信息：

尝试使用

不透明度

属性，如果这不起作用，为什么不使用RGBA？感谢您，特别是检查属性支持的JS解决方案。我只是用mixBlendMode替换了backgroundBlendMode，并使用了不带引号的undefined。主要问题是ie 11不支持@supports或mix-blend模式，如果是@jopfre，那么您可以简单地将其用作渐进增强。设置回退（不透明度等），然后如果

@支持

。。。然后为增强版编写代码。