CSS3技巧36：backdrop-filter 背景滤镜

作者：System 时间：2024年08月22日分类：所有,css3 字数：697

这篇文章距离上次修改已过225天，其中的内容可能已经有所变动。

/* 添加背景滤镜以实现模糊效果 */
.blur-background {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色 */
}

/* 应用于元素的样式 */
.my-element {
  width: 300px;
  height: 200px;
  position: relative;
  z-index: 10;
}

/* 父容器样式 */
.parent-container {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden; /* 确保过滤效果不会超出容器范围 */
}

/* HTML结构 */
<div class="parent-container">
  <div class="my-element">这里是内容</div>
  <div class="blur-background"></div>
</div>

这个例子展示了如何使用backdrop-filter属性为元素添加背景模糊效果。.blur-background类创建了一个半透明的背景，并且利用backdrop-filter实现了模糊效果。.my-element类是需要展示在模糊背景上的内容，而.parent-container类确保模糊效果不会超出设定的容器范围。

CSS3技巧36：backdrop-filter 背景滤镜

评论已关闭

推荐阅读