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

【问题标题】：How do I desaturate and saturate an image using CSS?如何使用 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;
}

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

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

【问题讨论】：

标签： html image css grayscale

【解决方案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%);
  }

【讨论】：