如何使用 CSS 向背景图像添加过滤器？

CSS 提供了一种通过添加过滤器来修改背景图像的方法。过滤器提供了多种效果，例如模糊、对比度调整、色彩反转等，可以用来美化页面。

具体步骤

1. 为元素添加背景图像

   .bg {
     background-image: url('example.jpg');
   }
   

2. 添加过滤器

   .bg {
     background-image: url('example.jpg');
     filter: blur(5px);
   }
   

   这里的 blur(5px) 表示将背景图像模糊化，模糊程度为 5 像素。可以根据需求调整模糊半径。

3. 为了兼容不同浏览器，需要加上相应的前缀

   .bg {
     background-image: url('example.jpg');
     filter: blur(5px);
     -webkit-filter: blur(5px); /* Safari 和 Chrome */
     -moz-filter: blur(5px); /* Firefox */
     -o-filter: blur(5px); /* Opera */
     -ms-filter: blur(5px); /* IE */
   }
   

使用不同的过滤器效果

除了模糊效果，过滤器还提供了其他多种效果。下面列举几种常用的效果：

• 对比度调整

  .bg {
    background-image: url('example.jpg');
    filter: contrast(200%);
    -webkit-filter: contrast(200%); /* Safari 和 Chrome */
    -moz-filter: contrast(200%); /* Firefox */
    -o-filter: contrast(200%); /* Opera */
    -ms-filter: contrast(200%); /* IE */
  }
  

  这里的 contrast(200%) 表示将对比度增加到原来的两倍。

• 颜色反转

  .bg {
    background-image: url('example.jpg');
    filter: invert(100%);
    -webkit-filter: invert(100%); /* Safari 和 Chrome */
    -moz-filter: invert(100%); /* Firefox */
    -o-filter: invert(100%); /* Opera */
    -ms-filter: invert(100%); /* IE */
  }
  

  这里的 invert(100%) 表示将背景图像的颜色反转。

• 灰度滤镜

  .bg {
    background-image: url('example.jpg');
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* Safari 和 Chrome */
    -moz-filter: grayscale(100%); /* Firefox */
    -o-filter: grayscale(100%); /* Opera */
    -ms-filter: grayscale(100%); /* IE */
  }
  

  这里的 grayscale(100%) 表示将背景图像转换为灰度图像。

总结

通过 CSS 的过滤器功能可以实现多种背景图像效果，可以根据不同需求进行设置。注意需要加上不同浏览器的前缀以兼容各个浏览器。