ホームページ > ウェブフロントエンド > CSSチュートリアル > 異なるブラウザ間で背景画像をグレースケールに変換するにはどうすればよいですか?

異なるブラウザ間で背景画像をグレースケールに変換するにはどうすればよいですか?

DDD
リリース: 2024-10-27 07:55:03
オリジナル
381 人が閲覧しました

How to Convert Background Images to Greyscale Across Different Browsers?

CSS を使用してグレースケールの背景画像を作成する方法

この活気に満ちたダイナミックな Web デザインの時代では、微妙なシンプルさを取り入れることが必要な場合があります。これを実現する 1 つの方法は、背景画像をグレースケールに変換することです。これにより、Web サイトにクラシックまたはビンテージの美学を与えることができます。

クロスブラウザ CSS3 フィルター

背景をグレースケールする最も簡単なアプローチ画像は CSS3 フィルタ グレースケールを適用するものです:

1

-webkit-filter: grayscale(100%);

ログイン後にコピー

ただし、ブラウザの互換性制限のため、この手法は Chrome v.15 と Safari v.6 でのみ機能します。

クロスブラウザ SVGフィルター

クロスブラウザーのグレースケール効果を実現するには、SVG フィルターを利用できます。

1

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

ログイン後にコピー

このソリューションは、Firefox、Chrome、Edge など、ほとんどの主要なブラウザーで動作します。

jQuery アニメーション

JavaScript を使用してグレースケール効果を動的に切り替えたい場合は、jQuery を使用できます。

1

2

3

4

5

6

$(".nongrayscale").hover(function () {

  $(this).addClass("grayscale").fadeTo(400, 1);

});

$(".grayscale").hover(function () {

  $(this).removeClass("grayscale").fadeTo(400, 1);

});

ログイン後にコピー

このコードは、グレースケール クラスを追加し、マウスを置くと画像をフェードします。 .

IE10-11 の互換性

Internet Explorer 10-11 では、上記の SVG フィルター技術は機能しません。代わりに、彩度を下げるフィルタを使用できます。

1

2

3

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">

  <feColorMatrix type="saturate" values="0" />

</filter>

ログイン後にコピー

このフィルタは、filter 属性を使用して画像に適用できます。

これらのメソッドを利用すると、CSS で背景画像を簡単にグレースケールできます。ブラウザ間の互換性を維持しながら、Web デザインに時代を超越したタッチを追加します。

以上が異なるブラウザ間で背景画像をグレースケールに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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