Skip to content

backdrop-filter 的使用

这个属性可以为一个元素后面区域添加图形效果,如模糊或颜色偏移等

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

创建时间:

最近更新: