HTML と CSS のみを使用してカラー画像をグレースケールに変換するにはどうすればよいですか?

HTML/CSS を使用して画像をグレースケールに変換する

この質問は、カラー ビットマップ画像をグレースケールのみで表示する簡単な方法を探ることを目的としています。 HTML と CSS を通じて。目標は、SVG または Canvas を使用する複雑さを回避し、Firefox 3 および Safari 3 以降と互換性のあるソリューションを見つけることです。

幸いなことに、Webkit での CSS フィルターの出現により、クロスブラウザー ソリューションが提供されました。このタスクのために。次のコード スニペットは、目的のグレースケール効果を実現する方法を示しています。

<img src="image.png">

filter プロパティは Internet Explorer 6 ～ 9 および Microsoft Edge でサポートされており、-webkit-filter プロパティは Google Chrome でサポートされています。 Safari 6 および Opera 15 .

ホバー時のグレースケール効果を無効にするには、次の CSS ルールを使用できます。適用:

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

このシンプルなソリューションにより、SVG または Canvas の追加のオーバーヘッドを必要とせずに、HTML/CSS でカラー画像をグレースケールに変換できます。

以上がHTML と CSS のみを使用してカラー画像をグレースケールに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。