大佬教程收集整理的这篇文章主要介绍了如何破解不支持的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或者仅当 – 如果不支持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 { ... }
以上是大佬教程为你收集整理的如何破解不支持的mix-blend-mode CSS属性？全部内容，希望文章能够帮你解决如何破解不支持的mix-blend-mode CSS属性？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。