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

Posted 2023-03-06

【中文标题】如何使用 CSS 对图像进行去饱和和饱和处理？

【英文标题】：How do I desaturate and saturate an image using CSS?

【发布时间】：2014-05-24 13:25:39

【问题描述】：

更新

我刚刚意识到去饱和仅在 Chrome 中有效。如何让它在 FF、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;

但我无法消除例如鼠标移到。

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

【参考方案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/

【讨论】：

太好了，成功了。但是你明白为什么去饱和在 FF 和 IE 中不起作用吗？

@Steven 它看起来像Firefox doesn't support 完整的filter 规范，因为它还不够固化。 IE 9 已弃用 -ms-filter 并且 IE 10 不支持它。

嗯，图片不好看，但提示非常有用。谢谢！

【参考方案2】：

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

img 
    filter: saturate(0%);

img:hover 
    filter: saturate(300%);

https://jsfiddle.net/t1jeh8aL/

【讨论】：

你的 jsfiddle 坏了。

@N-ate 谢谢，已修复。

【参考方案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%);