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

HTML/CSS で画像をグレースケールに変換する: 簡単な解決策

CSS を使用すると、カラー ビットマップをグレースケールで表示できますフィルター。このアプローチは、ブラウザーを超えたソリューションを提供し、比較的簡単に実装できます。

CSS を使用して画像にグレースケール効果を適用するには、次のコードをスタイル シートに追加するだけです:

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

このコードは、ページ上のすべての画像をグレースケールに変換します。あるいは、特定の画像をターゲットにすることもできます:

#my-image {
  /* CSS styles */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

ホバー時のグレースケール効果を無効にするには、次のコードを追加します:

#my-image:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

このシンプルな CSS ソリューションを使用すると、画像を簡単に表示できますSVG や Canvas などの複雑な技術を必要とせず、グレースケールで表示されます。

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