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

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

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

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

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

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

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

6

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

增加一个html的标签样式,写在lvjing.css文件里面即可。

html {overflow-y:scrollfilter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)-webkit-filter: grayscale(100%)}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6260797.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存