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

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

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

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

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

-webkit-filter: grayscale(100%);

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

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

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

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 を使用できます。

$(".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 フィルター技術は機能しません。代わりに、彩度を下げるフィルタを使用できます。

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

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

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

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