css3 设置图片背景模糊效果

CSS3 是一个强大的前端开发技术，可以实现许多令人瞩目的效果，如设置图片背景模糊效果。该效果可以为网站设计带来更加美观、富有层次感的视觉效果。

下面是通过 CSS3 设置图片背景模糊效果的代码示例：

.demo{
  background-image: url("image.jpg");  /*设置图片背景*/
  -webkit-filter: blur(5px);            /*Webkit内核的浏览器使用*/
  filter: blur(5px);                    /*标准的CSS写法*/
}

通过代码中的 -webkit-filter 和 filter 属性来实现图片的背景模糊效果。其中，blur() 函数是模糊滤镜的常见函数，用于设定一个元素的模糊效果，括号内填入的数值即为模糊程度，值越大，模糊效果越明显。

如果需要设置其他的滤镜效果，可以参考以下代码：

.demo{
  background-image: url("image.jpg");
  -webkit-filter: blur(5px) grayscale(50%);  /*同时设置模糊和灰度效果*/
  filter: blur(5px) grayscale(50%);
}

以上代码同时设置了模糊和灰度效果，其中 grayscale() 函数是灰度滤镜的常见函数，用于将元素转换为灰度图像，括号内填入的数值即为灰度程度，值越大，转换程度越高。

在实际开发中，设置图片背景模糊效果可以应用于许多场景，如登录页面、轮播图、首页等等，可以让网站设计呈现更加精美的效果，引起用户的兴趣和关注。