CSS3 backdrop-filter() 实现背景毛玻璃效果，区别于 blur()

CSS3 backdrop-filter() 实现背景毛玻璃效果，区别于 blur()

MDN相关说明 ​​https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter​​

一个可以实现背景毛玻璃效果的 CSS 属性

平常使用的 ​​filter​​​ 区别于 ​​backdrop-filter​​​​filter​​ 是模糊内容
​​backdrop-filter​​ 是使透过该层的底部元素模糊化

.blur-content{
    filter: blur(10px);
}

.blur-bg{
    backdrop-filter: blur()
}

这个在苹果官网有使用的例子
这是去掉 ​​​backdrop-filter​​ 的效果

这是加上 ​​backdrop-filter​​​ 的效果
在使用的时候为了不让模糊后的背景过黑，就添加了 ​​​saturate(180%)​​ 的效果

使用例子，很好用