如何使用 CSS 创建灰度背景图像

在这个充满活力和动态的网页设计时代，有时有必要融入一些微妙的简单性。实现此目的的一种方法是将背景图像转换为灰度，这可以为网站赋予经典或复古的美感。

跨浏览器 CSS3 过滤器

对背景进行灰度化的最直接方法图像是应用CSS3过滤器grayscale:

-webkit-filter: grayscale(100%);

但是，该技术仅适用于Chrome v.15和Safari v.6，因为浏览器兼容性限制。

跨浏览器 SVG 滤镜

要实现跨浏览器灰度效果，您可以利用 SVG 滤镜：

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");

此解决方案适用于大多数主要浏览器，包括 Firefox、Chrome 和 Edge。

jQuery 动画

如果您想使用 JavaScript 动态切换灰度效果，您可以使用 jQuery:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

此代码将添加灰度级，并在鼠标悬停时淡入图像。

IE10-11 兼容性

在 Internet Explorer 10-11 中，上述 SVG过滤技术不起作用。相反，您可以使用去饱和过滤器：

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

此过滤器可以使用过滤器属性应用于图像。

通过利用这些方法，您可以轻松地在 CSS 中对背景图像进行灰度化，为您的网页添加永恒的触感设计同时保持跨浏览器兼容性。