Question

我知道background-blend-mode是一个新的css功能，但我想知道它是否能够与css中的过滤技术相结合。

基本上我想要实现的是图像从全色变为饱和度并在悬停时混合到彩色背景（混合模式相乘）。

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

<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 /和＆＃34;启用实验性Web平台功能＆＃34;看效果。

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

最终，我创建了两个位于图像上方的新元素（图层）。然后我使用mix-blend-mode来达到效果。第一个元素（图像上方的图层）使用混合混合模式：饱和度，背景颜色为黑色（或白色），将图像转换为灰度。最上面的元素有黄色和混合混合模式：乘法。

我使用了伪元素：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 for SVG（FF，IE10等）和dxFilters for IE＆lt; = 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>

结合背景混合模式和图像中的灰度

1 个答案: