css - cssで画像を完全にグレーアウトする方法は?

Question

私はこの画像を持っています: .

次のようにグレー表示する必要があります。

この SO の質問の回答を使用: CSS で画像をグレーアウトしますか?

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

私はこれを得る：

フィルター プロパティを設定してfilter: grayscale(100%)も、色の変更は残ります。

とにかく私はそれを完全に灰色にすることができますか？

Answer 1

画像内の実際のピクセルを変更しようとしているようです。あなたが探しているのは次のようなものだと思います。

Pixastic (カラーアジャスト)

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 を使用してカラー バージョンを処理済みバージョンに置き換えることです。

もう 1 つのオプションは、キャンバスと畳み込みを使用して処理するか、ピクセルごとに処理することです。

ただし、ピクセル アプローチはブロックで最速の子供ではありません:
http://www.onaluf.org/en/entry/13

しかし、おそらくさまざまな手法を使用して処理すると、後で何が得られるかがわかります。
http://www.html5rocks.com/en/tutorials/canvas/imagefilters/