css3 设置图片背景模糊

CSS3提供了一个很好用的属性，可以设置图片背景模糊，让页面变得更加美观和吸引人。

/* 设置背景图片，注意要加上引号 */body {
    background-image: url("bg.jpg");
    background-size: cover;
}
/* 设置模糊效果，值越大越模糊 */.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}
    

以上代码中，我们首先通过body标签设置了页面的背景图片，并通过background-size属性来让图片铺满整个页面。

接下来通过定义一个.blur类来设置模糊效果，这里我们使用了CSS3的filter属性，同时考虑了不同浏览器的兼容性，构造了多个不同前缀的属性值。

最后我们只需要将.blur类添加到需要模糊的元素上即可，例如：

这里的内容会被模糊

这样就可以让选定的元素背景模糊起来了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！