1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。
所谓的毛玻璃效果其实是半透明+模糊,可以用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 效果,也可以说明,这个属性真的不是只能作用于图片,也不需要“截屏”啊。