【css】毛玻璃

backdrop-filter vs filter

backdrop-filter 与 filter 非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一个是只作用于元素后面的区域。

backdrop-filter:blur(30px);
filter:blur(30px);

举个🌰：

代码段：

.backdrop-filter {
  height: 200px;
  border: 8px solid plum;
  backdrop-filter: blur(30px);
  position: fixed;
  background-color: transparent;
  top: 0;
}

.content {
  height: 800px;
  background-color: skyblue;
}

.filter {
  height: 200px;
  border: 1px solid #000;
  background-color: greenyellow;
  filter: blur(30px);
  position: fixed;
  top: 300px;
}

<div class="backdrop-filter">backdrop-filter</div>
<div class="filter">filter</div>
<div class="content"></div>

运行效果：

兼容