如何在CSS背景图片上实现跨浏览器的灰度效果？-css教程-PHP中文网

如何在CSS背景图片上实现跨浏览器的灰度效果？

Susan Sarandon

发布： 2024-10-26 09:39:02

原创

642 人浏览过

How to Achieve Cross-Browser Greyscale Effects on CSS Background Images?

将 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中文网其他相关文章！