这个属性可以为一个元素后面区域添加图形效果，如模糊或颜色偏移等
TIP
这是一个新特性，查看支持浏览器
使用
TIP
这个属性需要在部分透明的元素上生效
css
.test {
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
}效果
你可以留意一下，当前网页的导航就使用了这个属性
css
.header-navbar {
background: rgba(0,0,0,.8);
backdrop-filter: blur(5px);
}与 filter 的差别
- 使用
filter的效果
filter
- 使用
backdrop-filter的效果
backdrop-filter
TIP
从上面可以看出来，两者在显示上没有区别
但当相对位置变化时两者的差别就出来了
将鼠标移动到图片上，注意观察动画变化时的效果
- 使用
filter的效果
filter
- 使用
backdrop-filter的效果
backdrop-filter