この活気に満ちたダイナミックな Web デザインの時代では、微妙なシンプルさを取り入れることが必要な場合があります。これを実現する 1 つの方法は、背景画像をグレースケールに変換することです。これにより、Web サイトにクラシックまたはビンテージの美学を与えることができます。
背景をグレースケールする最も簡単なアプローチ画像は CSS3 フィルタ グレースケールを適用するものです:
1 |
|
ただし、ブラウザの互換性制限のため、この手法は Chrome v.15 と Safari v.6 でのみ機能します。
クロスブラウザーのグレースケール効果を実現するには、SVG フィルターを利用できます。
1 |
|
このソリューションは、Firefox、Chrome、Edge など、ほとんどの主要なブラウザーで動作します。
JavaScript を使用してグレースケール効果を動的に切り替えたい場合は、jQuery を使用できます。
1 2 3 4 5 6 |
|
このコードは、グレースケール クラスを追加し、マウスを置くと画像をフェードします。 .
Internet Explorer 10-11 では、上記の SVG フィルター技術は機能しません。代わりに、彩度を下げるフィルタを使用できます。
1 2 3 |
|
このフィルタは、filter 属性を使用して画像に適用できます。
これらのメソッドを利用すると、CSS で背景画像を簡単にグレースケールできます。ブラウザ間の互換性を維持しながら、Web デザインに時代を超越したタッチを追加します。
以上が異なるブラウザ間で背景画像をグレースケールに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。