css - 在图像中结合背景混合模式和灰度

Question

我知道 background-blend-mode 是一个新的 css 特性，但我想知道它是否能够以任何方式与 css 中的过滤技术相结合。

基本上，我想要实现的是在悬停时将图像从全色变为去饱和并混合为彩色背景(混合模式乘法)。

下面是我尝试过的示例，您可以看到红色图像效果很好，因为它是深色，但对于橙色和黄色，原始图像的颜色会透过黄色显示出来，因为它们更暗，所以图像需要去饱和。最后一个示例 #yellow2 是我尝试实现去饱和的方式，但它会导致图像忽略混合模式。

http://jsfiddle.net/cstr44/dzwH4/2/

<div id="red"></div>

<div id="orange"></div>

<div id="yellow"></div>

<div id="yellow2"></div>

    #red{
width:250px;
height:200px;
background:red url(http://www.mucky-pups.co/wp-content/uploads/2013/05/9.jpg);
background-size:250px 200px;}

#red:hover{
background-blend-mode: multiply; }

#orange{
width:250px;
height:200px;
background:orange url(http://0.tqn.com/d/friendship/1/S/R/-/-/-/special-dog-breeds.jpg); background-size:250px 200px;}

#orange:hover{
background-blend-mode: multiply;}

#yellow{ 
width:250px;
height:200px;
background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px;}

#yellow:hover{ 
background-blend-mode: multiply;}

#yellow2{ 
width:250px;
height:200px;
background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px;
}

#yellow2:hover{ 
background-blend-mode: multiply;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);}

有没有其他方法可以做到这一点？(除了为每个图像创建去饱和版本之外)

Answer 1

我想我已经实现了您所追求的目标。该解决方案目前仅适用于 Chrome。

访问 chrome://flags/和“启用实验性 Web 平台功能”以查看效果。

将过滤器和混合模式应用于同一元素的组合失败。事实上，我试图继续在带有图像的元素上使用灰度滤镜，然后我覆盖了一个新元素并尝试了 mix-blend-mode。那也失败了。

最后，我创建了两个新元素(层)，位于您的图像上方。然后我使用mix-blend-mode来达到效果。第一个元素(图像上方的图层)使用 mix-blend-mode: saturation with a background color of black (or white) 将图像转换为灰度。最上面的元素具有黄色和 mix-blend-mode:multiply。

我使用伪元素 :before 和 :after 这样您就可以保持标记不变。

http://jsfiddle.net/dzwH4/8/

<div id="red"></div>

<div id="orange"></div>

<div id="yellow"></div>

<div id="yellow2"></div>

#red{
width:250px;
height:200px;
background:red url(http://www.mucky-pups.co/wp-content/uploads/2013/05/9.jpg);
background-size:250px 200px;}

#red:hover{
background-blend-mode: multiply; }

#orange{
width:250px;
height:200px;
background:orange url(http://0.tqn.com/d/friendship/1/S/R/-/-/-/special-dog-breeds.jpg); background-size:250px 200px;}

#orange:hover{
background-blend-mode: multiply;}

#yellow{ 
width:250px;
height:200px;
background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px;}

#yellow:hover{ 
background-blend-mode: multiply;}

#yellow2{ 
    width:250px;
    height:200px;
    background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px;
    position: relative;
}

#yellow2:after, #yellow2:before {
    content: ' ';
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#yellow2:before {
    background-color: black;
    mix-blend-mode: saturation;
}
#yellow2:after {
    background-color: yellow;
    mix-blend-mode: multiply;
}

#yellow2:hover:before, #yellow2:hover:after {
    display: block;
}

如果您正在寻找跨浏览器的解决方案，您可以采用相同的方法，将 feBlend 用于 SVG(FF、IE10 等)，将 dxFilters 用于 IE<=9。

更新:

这是我在 Chrome、FF、Opera、IE10、IE11、Safari 7 OSX 上测试过的 SVG 解决方案。

http://jsfiddle.net/5pmmet6b/4/

<div id="puppy">
    <svg>
        <defs>
            <filter id="colorize_yellow" color-interpolation-filters="sRGB">
                <feFlood flood-color="yellow" result="A"/>
                <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B"/>
                <feBlend mode="multiply" in2="B" in="A"/>
            </filter>
        </defs>
        <image id="yellow" filter="url(#colorize_yellow)" x="0" y="0" width="100%" height="100%" xlink:href="http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg"/>
    </svg>
</div>

#puppy {
    background: url('http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg');
    background-size: 249px 187px;
    position: relative;
}
#puppy svg {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}
#puppy, #puppy svg {
    height: 187px;
    width: 249px;
}
#yellow {
    opacity: 0;
}
#yellow:hover {
    opacity: 1;
}

旧的 Internet Explorer 方法:

适用于 IE 6-9:

<!DOCTYPE html>

<html>

<head>
    <title>Light Filter Sample</title>
    <style type="text/css">
        div, img {
            height: 200px;
            width: 250px;
        }
        #image {
            position: relative;
        }
        #grayscale {
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        }
        #yellow {
            display: none;
            -ms-filter: "progid:DXImageTransform.Microsoft.Light()";
            filter: progid:DXImageTransform.Microsoft.Light();
            left: 0;
            position: absolute;
            top: 0;
        }
        /* NOTE: you'll need to use script for hovering support on IE6 */
        #image:hover #yellow {
            display: block;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('yellow').filters.item("DXImageTransform.Microsoft.Light").addAmbient(255, 255, 0, 100);
        }
    </script>
</head>

<body>
    <div id="image">
        <img src="http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg" alt="">
        <div id="yellow">
            <div id="grayscale">
                <img src="http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>