如何用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/