HTML と CSS のみを使用して画像をグレースケールに変換できますか?

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

質問:

簡単な方法はありますか?複雑さを伴うことなく、HTML/CSS のみを使用してカラー ビットマップをグレースケールで表示する方法SVG と Canvas のどちらを使用しますか?

答え:

Webkit での CSS フィルターの出現により、クロスブラウザー ソリューションが登場しました。以下はグレースケール変換を可能にするコードです:

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+, Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge, Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

説明のために、HTML コードの例を次に示します:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

この手法を画像に適用すると、画像がグレースケールに変換され、モノクロ画像表示のためのシンプルで効果的なソリューション。

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