如何破解不受支持的混合混合模式CSS属性? [英] How to hack unsupported mix-blend-mode CSS property?

问题描述

我正在编程图像库，具有特定的悬停效果.当用户浏览图片时，我使用:: before伪元素使用mix-blend-mode CSS属性在带有图片的div上创建窗帘":

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:

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的其他一些)不支持此属性，并且在图像上显示了完整的红色矩形，因此它是不可见的.

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.

是否有可能破解这种混合混合模式的行为，使其在Firefox或Chrome浏览器中发挥作用?

Is it possible to hack this mix-blend-mode behaviour to act like in Firefox or Chrome?

如果不支持，并且仅在不支持mix-blend-mode的情况下，是否可以隐藏Cover div或将其设置为半透明?

If not, is it possible to hide covering div or set it semi-transparent if and only-if mix-blend-mode is not supported?

谢谢

推荐答案

如果您不想使用纯不透明性作为后备:

If you don't want to use plain opacity as a fallback:

JavaScript polyfill 这会很慢，并且不会让您轻松设置动画.但是，它可以让您为每个匹配的图像创建一个备用图像，然后可以淡化不透明度或在这两个图像之间做其他CSS过渡技巧.

Javascript polyfill This 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.

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

http://codepen.io/brav0/pen/bJDxt (not my pen - uses multiply, not soft light)

服务器端处理 不会是我的首选，但是如果您控制服务器端代码，则可以使用服务器端映像库(GD等)准备备用映像.

Server side processing Wouldn'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)

用于检测IE的CSS黑客

@media screen { @media (min-width: 0px) {
    div.img::after{ ... }
} }

使用JavaScript

if (window.getComputedStyle(document.body).mixBlendMode !== undefined)
    $("div.img").addClass("curtain");

...和CSS ...

...and the CSS...

img.curtain::after { ... }

这篇关于如何破解不受支持的混合混合模式CSS属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！