6

我在标签。

但是我没有找到任何东西可以降低背景图像的饱和度，（用作元素（div）背景的图像。

有没有办法在不使用 2 个背景的情况下使悬停时的背景图像去饱和（即图像精灵一个是黑白，另一个是彩色）

我可以使用 Image Sprites 来做这样的事情。

// 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();
                });

但我不想要这个。我想要动态去饱和背景图像。请帮忙。

4

2 回答 2

3

看看这个页面http://davidwalsh.name/css-filters。它解释了一些过滤方法（webkit 浏览器）。

也许您应该使用画布（更好的浏览器支持）或最好在服务器本身上做得更好，例如使用 php.ini。

于 2013-01-01T17:29:56.577 回答
0 
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 仅对背景图像进行去色处理，而 Div 中的其他图像保持饱和

于 2015-09-27T07:38:20.603 回答