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

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

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

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

-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 を含むほとんどの主要なブラウザで動作します、クロム、および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 で背景画像を簡単にグレースケール化し、ウェブに時代を超越した雰囲気を加えることができます。ブラウザ間の互換性を維持しながらデザインします。