在CSS3中,我们可以使用blur()方法来实现模糊度滤镜效果,也就是“马赛克”。
语法:
filter: blur(像素)
说明:
blur()方法的取值是一个像素值,取值越大,模糊效果越明显。
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#after
{
filter:blur(5px);
}
</style>
</head>
<body>
<div id="before">
<img src="img/princess.png" alt="">
</div>
<div id="after">
<img src="img/princess.png" alt="">
</div>
</body>
</html>
浏览器预览效果如下图所示.