如何破解不受支持的混合模式 CSS 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32613896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hack unsupported mix-blend-mode CSS property?
提问by Ján Jano?ko
I'm programming gallery of images, with specific hover effect. When user comes over the image, I use ::before pseudoelement to create "curtain" over the div with image using mix-blend-mode CSS property:
我正在为图像库编程，具有特定的悬停效果。当用户看到图像时，我使用 ::before 伪元素使用 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;
}
Resulting effect is like this:
产生的效果是这样的：
But unluckily, IE (and some others according to caniuse) does not support this property and displays full red rectangle over the image and therefore it is not visible.
但不幸的是，IE（以及根据 caniuse 的其他一些）不支持此属性并在图像上显示全红色矩形，因此它不可见。
Is it possible to hack this mix-blend-mode behaviour to act like in Firefox or Chrome?
是否有可能破解这种混合模式行为，使其像在 Firefox 或 Chrome 中一样？
If not, is it possible to hide covering div or set it semi-transparent if and only-if mix-blend-mode is not supported?
如果没有，当且仅当不支持混合模式时，是否可以隐藏覆盖 div 或将其设置为半透明？
Thank you
谢谢
采纳答案by Richard Peterson
If you don't want to use plain opacity as a fallback:
如果您不想使用纯不透明度作为后备：
Approaches to cross-browser support
跨浏览器支持的方法
Javascript polyfillThis will be slow, and will not allow you to easily animate. However, it will let you create an alternate image for each of your matching images, and you can then fade the opacity or do other CSS transition tricks between the two.
Javascript polyfill这会很慢，并且不允许您轻松制作动画。但是，它可以让您为每个匹配的图像创建一个备用图像，然后您可以淡化不透明度或在两者之间执行其他 CSS 过渡技巧。
http://codepen.io/brav0/pen/bJDxt(not my pen - uses multiply, not soft light)
http://codepen.io/brav0/pen/bJDxt（不是我的笔 - 使用乘法，而不是柔光）
Server side processingWouldn't be my first choice, but if you control the server-side code, you can prepare alternate images using server side imaging libraries (GD, etc)
服务器端处理不会是我的第一选择，但如果您控制服务器端代码，您可以使用服务器端图像库（GD 等）准备备用图像
Only enabling the effect for supporting browsers
只开启支持浏览器的效果
Css hacks for detecting IE
用于检测 IE 的 CSS hack
@media screen { @media (min-width: 0px) {
div.img::after{ ... }
} }
Using JavaScript
使用 JavaScript
if (window.getComputedStyle(document.body).mixBlendMode !== undefined)
$("div.img").addClass("curtain");
...and the CSS...
...和 CSS ...
img.curtain::after { ... }
回答by Ján Jano?ko
I know this is an old question, but you can also use the @supports feature query to detect if a certain property is or isn't available.
我知道这是一个老问题，但您也可以使用 @supports 功能查询来检测某个属性是否可用。
@supports not (mix-blend-mode: multiply) {
.image {
...
}
}
If you're interested, you can read more about the feature query at: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
如果您有兴趣，可以在以下位置阅读有关功能查询的更多信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/@supports
