在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>

浏览器预览效果如下图所示.