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

时间：2015-09-16 16:22:31

标签： css internet-explorer

我正在编辑图像库，具有特定的悬停效果。当用户来到图像时，我使用::在伪元素之前使用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;
}

产生的效果是这样的：

enter image description here

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

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

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

谢谢

2 个答案:

答案 0 :(得分：7)

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

跨浏览器支持的方法

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

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

服务器端处理 不是我的第一选择，但如果你控制服务器端代码，你可以使用服务器端成像库（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 { ... }

答案 1 :(得分：7)

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

{{1}}

如果您有兴趣，可以在以下位置详细了解功能查询：https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

相关问题
最新问题