css如何设置背景图片灰度

1. 简介

CSS3引入了多个滤镜（Filter）功能，包括模糊，反转，饱和度，对比度，色相旋转等。本文主要讨论如何使用CSS3将一张背景图片转换成灰度形式。

2. 实现方法

2.1 使用filter属性

使用CSS3的filter属性可以实现多种滤镜效果，包括灰度化。在该属性中使用grayscale()函数，值为1时表示完全灰度化，值为0时表示原图不变，范围在0~1之间表示灰度化程度（0.5表示50%的灰度化）。

.gray-bg{
    background-image: url('bg.jpg');
    -webkit-filter: grayscale(0.6);
        filter: grayscale(0.6);
}

在上面的代码中，我们使用了灰度程度为0.6的滤镜效果，添加了前缀 -webkit- 以适配不同的浏览器厂商。

2.2 使用伪元素

使用一个父元素和一个伪元素可以轻松地实现背景图片的灰度化。在父元素中设置背景图片，然后在伪元素中添加灰度滤镜，然后使这个伪元素铺满整个背景。这样图片就可以以灰度形式呈现。

.gray-bg{
    position: relative;
    background-image: url('bg.jpg');
}
.gray-bg::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: gray;
    mix-blend-mode: luminosity;
}

在上面的代码中，我们使用了 ::before 伪元素，通过 mix-blend-mode：luminosity 让它与父元素混合，使之变成灰度。伪元素的大致意思是在父元素内容之前插入一个空元素，然后使其填满整个元素。

3. 注意事项

使用背景图片的灰度化可以增加网站的美感和质感，但需要注意的是，灰度化的图片可能会影响页面的可读性，很难让用户在图像上区分不同的内容。

此外，灰度化的背景图片需要更加注意选择，不同的图片适合不同的网站主题。对于有色彩主题的网站，灰度化可能不是一个好的选择。

最后，需要同时注意灰度化图片对性能的影响。使用灰度滤镜可能会使页面加载速度变慢。因此，在使用灰度化图片之前，必须仔细评估其对性能的影响是否值得。