ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS フィルターを使用して画像を簡単にグレースケールに変換するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-12-15 02:09:09
オリジナル
420 人が閲覧しました

How Can I Easily Convert Images to Grayscale Using CSS Filters?

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

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

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

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

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

-webkit-filter: grayscale(1);
filter: grayscale(1);
ログイン後にコピー

コード例

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

<img src="image.jpg">
ログイン後にコピー

画像をグレースケールで表示するには、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート