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

CSS 背景画像をグレースケールにフェードするためのクロスブラウザ ソリューション

CSS3 フィルターが利用できるにもかかわらず、背景画像にグレースケール効果を適用することはできません。異なるブラウザ間での挑戦。 SVG フィルターを使用したソリューションは、Safari と Chrome では機能しますが、他のブラウザーでは機能しません。

この制限を克服するための別のアプローチは、インライン SVG コードを使用してカスタム フィルターを作成することです。この方法は、IE10 および 11 を含むすべての最新ブラウザと互換性があります。

IE10-11 のコード サンプル:

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

グレースケール効果を切り替えるための jQuery ソリューション:

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

<code class="html"><div id="image" class="nongrayscale">
  rollover this image to toggle grayscale
</div></code>

<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>

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