早在iOS7刚发布的时候,我就试图在网站上加上iOS7上类似的毛玻璃效果,结局当然是没成功。
不过也找到了一些东西,我们知道使用filter: blur(10px);
来达到高斯模糊的效果,但这种滤镜只能对添加此滤镜的元素生效,而影响不到元素下层的其它元素,因此也就没有办法实现毛玻璃效果,当时找到了一个项目,是一个对某一区域实时生成快照的Javascript库(具体的已经忘了,应该是Javascript库),然后我们就可以对快照添加高斯模糊滤镜,以此实现毛玻璃效果。可想而知,这样做效率是很低下的,所以最终只能放弃(其实懒到连尝试都没尝试)。
而现在,我们有了backdrop-filter
!不过别高兴的太早。。
兼容性
backdrop-filter
现在的支持范围极其有限,目前支持的可以说只有Safari浏览器:
Safari 9+及Safari Mobile 9.2+,也就是OS X 10.11+及iOS 9+上的Safari浏览器支持。其它的,Chrome 47+ 及 Chrome For Android 51+(及其它使用此内核的浏览器)可以到Chrome - Flags: chrome://flags/#enable-experimental-web-platform-features
中开启「实验性网络平台功能」以获得支持。
可以到Can I Use中查看更为详细的浏览器支持情况。
目前 Chrome 上会有些 Bug,而Safari则会好上很多,看图就知道了:
Safari上的效果(同样的代码):
可以说任重而道远啊。。不过总算有点盼头了不是么。
滤镜效果
backdrop-filter
与filter
的区别就是filter
是对添加此滤镜的元素生效,无法应用到其下层元素,而backdrop-filter
则刚好相反,其是对添加此滤镜的元素的下层元素的快照添加滤镜,因此可以很方便的实现毛玻璃效果。
backdrop-filter
可以使用的滤镜主要有:
<url>
blur() /* 高斯模糊 */
brightness() /* 亮度 */
contrast() /* 对比度 */
drop-shadow() /* 阴影 */
grayscale() /* 灰度 */
hue-rotate() /* 色相旋转 */
invert() /* 反色 */
opacity() /* 透明度 */
sepia() /* 褐色 */
saturate() /* 饱和度 */
使用
backdrop-filter
的使用和filter
一样,如:
.element {
background-color: rgba(255, 255, 255, 0.3);
/* 目前 Safari 系浏览器仅支持 -webkit-backdrop-filter */
-webkit-backdrop-filter: brightness(150%) blur(30px);
backdrop-filter: brightness(150%) blur(30px);
}
而鉴于目前支持设备的有限,我们可以使用@supports
来为不同的设备添加不同的效果:
/* 默认情况下的样式,如:不支持 backdrop-filter 甚至不支持 @supports 的情况下 应用此效果 */
.element {
background-color: #fff;
}
@supports (-webkit-backdrop-filter: brightness(150%) blur(30px)) or (backdrop-filter: brightness(150%) blur(30px)){
/* 支持 backdrop-filter 时应用的效果,记得把一些属性覆盖掉 */
.element {
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: brightness(150%) blur(30px);
backdrop-filter: brightness(150%) blur(30px);
}
}
对于其它的滤镜效果你可以自行折腾查看。
演示
如果你的浏览器支持,那么你应该可以在本页面看到一个有毛玻璃特效的顶部悬浮条,如果没有。。。那么就参考前面兼容性一节开启特性支持或更换其它浏览器查看吧~
最后再放张图片,你好好体会一下~
blog变成绿的了owo
恩,蛤蛤
为什么你们发的我都看不懂(╯‵□′)╯︵┻━┻
有哪个字不认识,我教你读 @(滑稽)
!QW@#E$%^&*()
哈哈哈
@(滑稽)魔法师你好,魔法师再见