css 使背景图片变灰 |css 基线之道

/* 将背景图片变灰 */
/* 使用CSS3支持的滤镜效果实现，部分浏览器不支持 */
background-image: url(图片路径);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
/* 通过设置透明度和黑色背景实现 */
background-image: url(图片路径);
background-color: black;
opacity: 0.5;

上述代码分别使用了两种方式来实现背景图片变灰的效果。第一种方式是通过CSS3支持的滤镜效果，可以实现比较完美的效果，但是部分浏览器不支持。

第二种方式则是通过设置透明度和黑色背景来实现的，实现较为简单，但是在图片较亮的时候效果可能并不是很理想。

总之，通过CSS可以很方便地实现将背景图片变灰的效果，开发者可以根据具体需求选择不同的实现方式。