使用CSS的伪元素和backdrop-filter属性来实现背景模糊和蒙版效果
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文档类型声明 -->
<meta charset="UTF-8">
<!-- 设置字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 兼容性元数据，确保在最新版本的IE浏览器中正常显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 视口元数据，使页面适应不同的设备屏幕尺寸 -->
<title>css实现背景模糊且加蒙版</title>
<!-- 网页标题 -->
<style>
/* 样式开始 */
.father {
/* 父容器样式 */
height: 330px;
/* 容器高度 */
background-image: url('bg-img.png');
/* 设置背景图像 */
position: relative;
/* 相对定位，用于子元素的定位参考 */
&:before {
/* 使用CSS嵌套为父元素添加一个伪元素 */
content: '';
/* 伪元素内容为空 */
display: block;
/* 显示为块级元素 */
height: 100%;
/* 高度与父元素相同 */
width: 100%;
/* 宽度与父元素相同 */
background: rgba(0, 0, 0, 0.15);
/* 设置伪元素的背景颜色为半透明的黑色 */
position: absolute;
/* 绝对定位，覆盖在父元素之上 */
z-index: 1;
/* z-index值较低，位于子元素之下 */
}
.son {
/* 子元素样式 */
height: 100%;
/* 高度与父元素相同 */
font-size: 40px;
/* 字体大小 */
color: #fff;
/* 文字颜色为白色 */
backdrop-filter: blur(10px);
/* 对背景应用模糊效果，注意这里是对子元素的背景进行模糊，而不是父元素的背景 */
position: relative;
/* 相对定位，用于子元素的定位参考 */
z-index: 2;
/* z-index值较高，位于伪元素之上 */
}
}
/* 样式结束 */
</style>
</head>
<body>
<div class="father">
<!-- 父容器开始 -->
<div class="son">使用CSS的伪元素和backdrop-filter属性来实现背景模糊和蒙版效果</div>
<!-- 子元素开始 -->
</div>
<!-- 父容器结束 -->
</body>
</html>
网友评论