如何在 CSS 中实现灰度背景图像的跨浏览器兼容性？-css教程-PHP中文网

如何在 CSS 中实现灰度背景图像的跨浏览器兼容性？

Susan Sarandon

发布： 2024-10-25 19:15:59

原创

805 人浏览过

How can I achieve cross-browser compatibility for grayscale background images in 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>

登录后复制

通过使用 filter 属性将此过滤器应用于背景图像，我们可以实现灰度效果：

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