第二步,在<body></body>插入一个<div></div>,再在div元素里插入五个img元素,分别设置为class,如下图所示:
第三步,设置五个img元素的样式,图片高度和宽度为250px,如下图所示:
第四步,预览该静态页面,在浏览器中查看页面效果,如下图所示:
第五步,分别设置class为two、three、four和five的样式,如下图所示:
6
第六步,再次预览该静态页面,利用IE浏览器查看效果,如下图所示:
所谓的毛玻璃效果其实是半透明+模糊,可以用CSS filter实现。时间不多,就抛个砖,题主可以自己找一下文档和更多案例。
filter - CSS
div {
-moz-filter: blur(5px)
-webkit-filter: blur(5px)
-o-filter: blur(5px)
-ms-filter: blur(5px)
filter: blur(5px)
}
大体思路是,当出现弹出层的时候,对背景层增加blur filter,再给弹出层的一定透明度就可以了。
因为有同学坚持说 CSS filter 只能用于图片,所以录了一个小视频,证明它是可以用于可视的DOM元素的。
在 codepen 上找了一个栗子,是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果,也可以说明,这个属性真的不是只能作用于图片,也不需要“截屏”啊。