如何使用CSS对图像进行去饱和和饱和？

Update

更新

I just realized that the desaturation is only working in Chrome. How do I make it work in FF, IE and other browsers? (Headline changed)

我刚刚意识到脱饱和只能在Chrome中使用。如何在FF，IE和其他浏览器中使用它？（标题改变了）

I'm converting a color picture to greyscale by following the suggestions here: Convert an image to grayscale in HTML/CSS

我按照这里的建议将彩色图片转换为灰度：在HTML / CSS中将图像转换为灰度

And it works great (in Chrome): http://jsfiddle.net/7mNEC/

它的效果很好（在Chrome中）：http：//jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
img {
    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; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

But I'm not able to remove the desaturation on e.g. mouse over.

但是我无法去除例如去饱和度。鼠标移到。

Any ideas to what I'm doing wrong?

对我做错了什么想法？

3 个解决方案

#1

You just have to reverse the grayscale for each browser prefix CSS property:

您只需要反转每个浏览器前缀CSS属性的灰度：

img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
}

http://jsfiddle.net/7mNEC/1/

#2

Its cooler if you add a transition like this:

如果你添加这样的转换，它会更酷：

  img {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
  }
  img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }

#3

Since this question is about saturation, the saturate() filter may be a better fit. This also allows for super-saturated colors (values above 100%):

由于这个问题是关于饱和度，饱和（）滤波器可能更适合。这也允许超饱和的颜色（值超过100％）：

img {
    filter: saturate(0%);
}
img:hover {
    filter: saturate(300%);
}

http://jsfiddle.net/7mNEC/390/

#1