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