如何用css彻底灰显图像？

Question

我有这张图片：。

我需要将其显示为灰色：。

使用此SO问题中的回复：Gray out image with CSS?

 opacity : 0.4;
 filter: alpha(opacity=40); /* msie */

我明白了：

将过滤器属性设置为filter: grayscale(100%)仍然会改变颜色：

无论如何，我可以把它弄成灰色吗？

Answer 1

听起来您正在尝试更改图像中的实际像素。我相信你所寻找的是类似的东西。

Pixastic（coloradjust）

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

或PaintbrushJS（颜色色调）

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

Answer 2

你无法用CSS做到这一点。您需要先以这种或那种方式处理图像，以获得渐变灰度的实心灰色。

更好的方法是根据需要制作一个版本，然后使用css / js将颜色版本替换为已处理的版本。

另一种选择是使用画布和卷积处理它或逐像素地处理它。

像素方法不是块上最快的孩子：
http://www.onaluf.org/en/entry/13

但也许使用各种技术处理它可以为你提供以下内容：
http://www.html5rocks.com/en/tutorials/canvas/imagefilters/