javascript - 如何使用CSS去饱和div的背景图像？

Question

我在 标签中看到了很多用于降低图像饱和度的插件。

但我没有发现任何东西可以降低背景图像的饱和度，(用作元素 (div) 背景的图像。

有没有一种方法可以在不使用 2 个背景的情况下使悬停时的背景图像去饱和 (即图像 Sprite 一个是黑白的，另一个是彩色的)

我可以使用 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();
                });

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

Answer 1

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

也许您应该使用 canvas(更好的浏览器支持)或最好在服务器本身上做得更好，例如使用 php。