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

Question

我正在编写图像库，具有特定的悬停效果。当用户经过图像时，我使用::before 伪元素在带有图像的 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 或将其设置为半透明，当且仅当不支持混合混合模式时？

谢谢

Answer 1

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

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

如果您有兴趣，可以在以下位置阅读有关特征查询的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports