css使图像模糊

css使图像模糊

我们可以使用css中的filter（滤镜）属性使图片呈现出模糊的效果：
HTML代码：

<img src="img/A.jpg" />

页面效果：

添加filter属性：

img{
  filter:blur(5px)
}

页面效果：

以下是filter（滤镜）属性的参数及使用方法：

参数	呈现效果	使用方法	默认值
none	默认值，没有效果。	filter:none	none
blur	设置图像模糊。	filter:blur(px)	0
brightness	设置图像的亮暗度。	filter:brightness(%)	1
contrast	设置图片的对比度。	filter:contrast(%)	1
drop-shadow	设置图片的阴影。	filter:drop-shadow(px,px,px,color)	0,0,0,无
grayscale	设置图像为灰度图像。	filter:grayscale(0%~100%)	0
hue-rotate	设置图像色相旋转。	filter:hue-rotate(deg)	0deg
invert	设置图像反转。	filter:invert(%)	0
opacity	设置图像透明度。	filter:opacity(0%~100%)	1
saturate	设置图像饱和度。	filter:saturate(%)	1
sepia	设置图像为深褐色。	filter:sepia(0%~100%)	0
url	可以包含一个锚点来指定具体的滤镜元素。	filter:url(“img/图片.jpg#id”)	无

注意：IE浏览器不支持filter属性。