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

Question

更新

我刚意识到，这个去色效果只在Chrome浏览器中能够实现。我该如何让它在Firefox、IE和其他浏览器上也能够工作呢？（标题已更改）

---

我正在按照这里的建议将一张彩色图片转换为灰度图像：Convert an image to grayscale in HTML/CSS

而且它在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;
}

但我无法去除例如鼠标悬停时的去色效果。

有什么想法，我做错了什么吗？

- Steven

Answer 1

您只需要为每个浏览器前缀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/

- Alex W

---

太好了，这个方法可行。但是你明白为什么在FF和IE中去饱和度不起作用吗？ - Steven

@Steven 看起来 Firefox 不支持 完整的 filter 规范，因为它还没有足够的稳定性。IE 9 已经弃用了 -ms-filter，而 IE 10 则不支持它。 - Alex W

嗯，图片不太好看，但是这个提示非常有用。谢谢！ - Sergio

Answer 2

由于这个问题是关于饱和度的，所以saturate()滤镜可能更适合。这也允许超饱和颜色（值高于100%）：

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

https://jsfiddle.net/t1jeh8aL/

- Sphinxxx

---

你的 jsfiddle 坏了。 - N-ate

@N-ate 谢谢，已修复。 - Sphinxxx

Answer 3

如果您像这样添加过渡效果，它会更加酷炫:

  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%);
  }

- Samuel Ramzan