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%) 的效果

使用例子，很好用