如何使用CSS使一个DIV的背景图像变为灰色？

Question

我看到很多插件可以在标签中去除图像的色彩。

但我没有找到任何可以去除背景图像（用作元素（div）背景的图像）的东西。

有没有一种方法可以在悬停时去除背景图像的色彩，而不使用两个背景（即图像精灵一个是黑白的，另一个是彩色的）？

我可以使用图像精灵来实现这样的效果。

// Initially color Image    
$(<element>).mouseover(function(e){

                    jQuery(this).children(":first").stop().animate(
                    {
                        'background-position': <some coordinates>
                        // Coordinates of b&w Image  
                    },
                    100                       
                    );

                    e.stopPropagation();
                })
                .mouseout(function(e){

                    jQuery(this).children(":first").stop().animate(
                    {
                        'background-position': <some coordinates>
                          // Coordinates of color Image   
                    },
                    100,
                    settings.easingType
                    );

                    e.stopPropagation();
                });

但我不想这样。我想动态地使背景图像褪色。 请帮忙。

- MKAka

---

我也很感兴趣，你有取得任何进展吗？ - bluantinoo

请在此处查看答案 https://dev59.com/0obca4cB1Zd3GeqPTDzA#56451697 - Kalnode

Answer 1

请查看此页面 http://davidwalsh.name/css-filters。它解释了一些过滤器方法（适用于webkit浏览器）。

也许您应该使用canvas（支持更好的浏览器），或者最好在服务器上使用，例如使用php。

- bukart

Answer 2

element: hover{
     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");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray;
}

这里是相关问题，希望有人需要重定向。

如何使用CSS去除背景图片的色彩饱和度，同时保持其他图片的饱和度

- MKAka