CSS3技巧36:backdrop-filter 背景滤镜
/* 添加背景滤镜以实现模糊效果 */
.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
类确保模糊效果不会超出设定的容器范围。
评论已关闭