CSS 背景画像のクロスブラウザー グレースケール効果を作成するにはどうすればよいですか?

CSS 背景画像のクロスブラウザー グレースケール

背景画像は Web ページに奥行きと視覚的な面白さを加えることができますが、場合によっては、背景画像を表示することが望ましい場合があります。彩度の低い形式またはグレースケール形式で表示されます。 CSS3 の filter:grayscale() プロパティは、Chrome や Safari などの最新のブラウザでこの効果を実現できますが、以前のバージョンではサポートされていません。この制限を克服するには、クロスブラウザーのソリューションが必要です。

フィルター フォールバック:

1 つの方法は、インライン SVG で filter: url() プロパティを利用することです。グレースケール変換を定義するフィルター。この手法は、Firefox、IE、Edge を含むほとんどのブラウザで機能します。

<code class="css">.grayscale {
  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"></fecolormatrix></filter></svg>#grayscale");
}</code>

提供された SVG フィルターは、各カラー チャネルを元の値の 33.33% に変換するカラー マトリックスを定義し、グレースケール効果を効果的に作成します。 .

jQuery Toggle:

動的グレースケール切り替えが必要な場合は、jQuery を利用して、マウスオーバー イベントとマウスアウト イベントでグレースケール フィルターを適用および削除できます:

<code class="javascript">$(document).ready(function () {
  $("#image").mouseover(function () {
    $(".nongrayscale").removeClass().fadeTo(400, 0.8).addClass("grayscale").fadeTo(400, 1);
  });
  $("#image").mouseout(function () {
    $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
  });
});</code>

このスクリプトは、スムーズなフェードインおよびフェードアウト アニメーションを使用して、画像のグレースケール効果を切り替えます。

SVG 彩度の低下:

IE のバージョン (10-11) では、SVG 実装の変更により、上記の解決策が機能しない可能性があります。これらのブラウザの場合、別の SVG ベースのアプローチを使用して画像の彩度を下げることができます。

<code class="html"><svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <fecolormatrix type="saturate" values="0"></fecolormatrix>
    </filter>
  </defs>
  <image xlink:href="your_image.jpg" width="600" height="600" filter="url(#desaturate)"></image>
</svg></code>

このメソッドは、カラー マトリックスの彩度値を 0 に設定することにより、画像をグレースケールに変換します。

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