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

CSS のグレースケール背景画像

問題:

フェーディングに対するクロスブラウザーのサポートの実現CSS の背景画像をグレースケールにするのは依然として課題です。 CSS3 フィルタのグレースケール効果は、Chrome や Safari などの最新のブラウザでは効果的に機能しますが、Firefox、IE、モバイル ブラウザなどの古いブラウザでは機能しません。

解決策:

SVG フィルターの使用:

この解決策には、色変換を適用するためのクロスブラウザー アプローチを提供する SVG フィルターの使用が含まれます。この手法には、次の SVG フィルターを使用してデータ URL を作成することが含まれます:

<code class="svg"><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></code>

フィルター プロパティを使用してこのフィルターを背景画像に適用すると、グレースケール効果を実現できます:

<code class="css">.grayscale {
  -webkit-filter: grayscale(100%);
  filter: gray;
  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");
}</code>

動的切り替えに jQuery を使用する:

グレースケール効果を動的に切り替えるには、jQuery を利用できます:

<code class="jquery">$(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>

IE10-11 互換性:

IE10-11 の場合、ブラウザーのレンダリングが変更されたため、別のアプローチが必要です。次の SVG フィルターは彩度を下げるために使用でき、同様のグレースケール効果を実現できます:

<code class="svg"><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>

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