使用伪元素结合filter: blur()可实现背景模糊效果。通过.container::before设置背景图并应用blur(8px)，置于底层避免影响前景内容，配合z-index和定位实现视觉分离。调整blur值控制模糊程度，建议4px~10px以平衡效果与性能。对于毛玻璃效果，采用backdrop-filter: blur(10px)，适用于透明容器内背景虚化，如玻璃态面板，但需注意浏览器兼容性。此方法广泛用于现代网页设计中。
要实现CSS初级项目中的背景图模糊效果，关键在于使用filter属性中的blur()函数，但需要注意的是：直接对background-image使用模糊是不可行的，必须通过额外的元素或伪元素来实现视觉上的“背景模糊”。
1. 使用伪元素实现背景模糊
这是最常用且兼容性较好的方法。通过给容器添加一个伪元素（如::before），将图片设为该伪元素的背景，并对其应用模糊滤镜，再置于内容下方。
.container {
position: relative;
height: 400px;
overflow: hidden;
}
.container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
filter: blur(8px);
z-index: -1;
}
.container p {
position: relative;
color: white;
font-size: 24px;
text-align: center;
padding-top: 100px;
}
这样，模糊的背景不会影响前景文字或其他内容。
2. 调整模糊程度与性能优化
blur()的参数值越大，模糊越明显。一般4px~10px适合背景虚化。注意过高值可能影响页面渲染性能，尤其是在移动设备上。
立即学习“前端免费学习笔记（深入）”；
建议在模糊层上适当缩小背景尺寸或使用低分辨率背景图，以减轻GPU负担。
3. 实现毛玻璃（Backdrop Filter）效果
如果希望某个元素内部区域呈现“毛玻璃”效果（即背景模糊但内容清晰），可使用backdrop-filter。
注意：该属性不支持IE和部分旧浏览器。
示例：
.glass-panel {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;
margin: 50px auto;
width: 80%;
}
这个效果常用于模态框、导航栏等需要半透明模糊背景的场景。
基本上就这些。掌握伪元素+filter: blur()的组合，就能在大多数项目中实现美观的背景模糊效果。 
