图像背景-混合模式与灰度的结合

Question

我知道背景混合模式是一个新的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://标志/和“启用实验性网站平台功能”以查看效果。

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

最终，我创建了两个位于图像上方的新元素(层)。然后我用混合混合模式来达到效果。第一个元素(图片上方的图层)使用混合混合模式:饱和度与背景颜色为黑色(或白色)，以将您的图像转换为灰度。最上面的元素有黄色和混合模式:乘。

我使用了伪元素: the和: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，Safari7OSX上测试的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方法：

在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>