如何在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中文網其他相關文章！