如何为CSS背景图片创建跨浏览器灰度效果？

CSS 背景图像的跨浏览器灰度

背景图像可以增加网页的深度和视觉兴趣，但有时需要呈现它们采用去饱和或灰度格式。虽然CSS3的filter:grayscale()属性可以在Chrome和Safari等现代浏览器中实现这种效果，但它在早期版本中缺乏支持。为了克服这个限制，需要一个跨浏览器的解决方案。

过滤器回退：

一种方法是使用过滤器：带有内联 SVG 的 url() 属性定义灰度转换的过滤器。此技术适用于大多数浏览器，包括 Firefox、IE 和 Edge：

<code class="css">.grayscale {
  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>

提供的 SVG 滤镜定义了一个颜色矩阵，可将每个颜色通道转换为其原始值的 33.33%，有效地创建灰度效果.

jQuery 切换：

如果需要动态灰度切换，可以利用 jQuery 在鼠标悬停和鼠标移开事件上应用和删除灰度过滤器：

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

此脚本通过平滑的淡入和淡出动画切换图像上的灰度效果。

SVG 去饱和：

最近IE (10-11) 版本中，由于 SVG 实现的变化，上述解决方案可能不起作用。对于这些浏览器，可以使用另一种基于 SVG 的方法来降低图像的饱和度：

<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="your_image.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

此方法通过将颜色矩阵的饱和度值设置为 0 将图像转换为灰度。

以上是如何为CSS背景图片创建跨浏览器灰度效果？的详细内容。更多信息请关注PHP中文网其他相关文章！