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

CSS フィルターを使用して画像をグレースケールに変換する

Web 開発の領域では、画像をグレースケールに変換することが困難な場合があります。 SVG または Canvas を使用する従来の方法では時間がかかる場合があります。しかし、CSS フィルターの出現により、よりシンプルでブラウザーをまたいだソリューションが登場しました。

ブラウザー間グレースケール フィルタリング

CSS フィルターは、変更するための便利な方法を提供します。画像を含む要素の外観。 Grayscale() フィルターを使用すると、色情報を削除する効果を模倣して、画像をグレースケールに変換できます。

画像にグレースケール効果を適用するには、次の CSS プロパティを使用します:

-webkit-filter: grayscale(1);
filter: grayscale(1);

コード例

次の HTML について考えてみましょう。コード:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="CSS フィルターを使用して画像を簡単にグレースケールに変換するにはどうすればよいですか?" >

画像をグレースケールで表示するには、CSS スタイルを追加します:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

Hover Override

グレースケール効果を無効にするにはカーソルを置くと、さまざまなフィルター値を指定できます:

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

これにより、マウスを画像の上に置くと、画像を元の色に戻します。

ブラウザの互換性

CSS フィルタは、Webkit、Edge、Firefox 35 などの最新のブラウザでサポートされています。 。ただし、IE6 ～ 9 のサポートは制限されています。

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