如何使用 css 实现毛玻璃效果

xzgz.top 全站使用毛玻璃的设计风格，效果预览。

使用到backdrop-filter: blur(50px)属性

backdrop-filter

backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

backdrop-filter 的值是(css 的滤镜函数，参考链接)

使用 blur 函数即可实现背景虚化透明，实现毛玻璃的效果。

但是 backdrop-filter 有一定的兼容性，查看Can I use，使用 filter 元素代替原来元素的毛玻璃效果，以下是代码：

body {
  background: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)) center;
}

.box {
  text-align: center;
  margin: 100px auto;
  width: 500px;
  font-size: 28px;
  padding: 30px;
  overflow: hidden;
}

.box:nth-child(1) {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
}
.box:nth-child(2) {
  position: relative;
}
.box:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(10px);
  z-index: -2;
  background: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)) center fixed; /* 和原背景元素的背景设置的一致，fixed是为了滚动的时候不会出现错位 */
  margin: -20px; /** 因为filter：blur会导致边缘虚化，用负边距去除边缘虚化 **/
}
.box:nth-child(2)::before {
  /* 加一个元素用来补充颜色 */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.2);
}

结构

<body>
  <div class="box">Hello word.</div>
  <div class="box">Hello word.</div>
</body>

如何使用CSS实现毛玻璃效果。

如何使用 css 实现毛玻璃效果

backdrop-filter