如何利用HTML5和CSS3代码实现模糊滤镜

html-css011

如何利用HTML5和CSS3代码实现模糊滤镜,第1张

第一步,打开HBuilder工具,新建静态页面blur.html,如下图所示:

第二步,在<body></body>插入一个<div></div>,再在div元素里插入五个img元素,分别设置为class,如下图所示:

第三步,设置五个img元素的样式,图片高度和宽度为250px,如下图所示:

第四步,预览该静态页面,在浏览器中查看页面效果,如下图所示:

第五步,分别设置class为two、three、four和five的样式,如下图所示:

6

第六步,再次预览该静态页面,利用IE浏览器查看效果,如下图所示:

二种方法:CSS3的filter,加一层Canvas实现高斯模糊。

用filter的话,下面很多层总有个父级吧? 在这个父级上加 filter:blur(5px) 不就完了?粗暴点,body下一个半透明遮罩层,再一个wrapper包住所有内容。

用canvas实现高斯模糊,这个本质上就是将背景投影到canvas上,然后再高斯模糊,这个可以找相应插件。合金队也有,不过可能太大了。