Html 如何使用 CSS 去饱和和饱和图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22994810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I desaturate and saturate an image using CSS?
提问by Steven
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
我按照这里的建议将彩色图片转换为灰度： Convert an image to grayscale in 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?
对我做错了什么有什么想法吗？
回答by Alex W
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;
}
回答by Samuel Ramzan
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%);
}
回答by Sphinxxx
Since this question is about saturation, the saturate()filtermay be a better fit. This also allows for super-saturated colors (values above 100%):
由于这个问题是关于饱和度的，saturate()过滤器可能更适合。这也允许超饱和的颜色（值高于 100%）：
img {
filter: saturate(0%);
}
img:hover {
filter: saturate(300%);
}
