html背景图能不能变模糊,CSS3 设置模糊背景图片

使用filter()函数实现模糊背景

使用方法：

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */

filter: blur(5px);

blur(px)

给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

.img1 {

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */

filter: blur(5px);

}

.content{

position:absolute;

width:300px;

height:80px;

top:160px;

background-color:#ddd;

opacity:0.5;

text-align:right;

}

.img2{

position:absolute;

left:50px;

top:150px;

}

图片使用高斯模糊效果:

前端虐我千百遍  

我待前端如初恋  

注意： Internet Explorer 不支持 filter 属性。

效果图：

本文来源于网络：查看 >https://blog.csdn.net/csdn9_14/article/details/53084401