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

使用 backdrop-filter 的效果

backdrop-filter

TIP

从上面可以看出来，两者在显示上没有区别

但当相对位置变化时两者的差别就出来了

将鼠标移动到图片上，注意观察动画变化时的效果

使用 filter 的效果

使用 backdrop-filter 的效果

backdrop-filter

backdrop-filter 的使用

使用 ​

效果 ​

与 filter 的差别 ​

toLocaleString 的使用

原生的图片和框架懒加载

使用

效果

与 `filter` 的差别