CSS设置背景图片模糊，内容不模糊

<div class="blurred-background">
    <p>这是前景内容，它应该是清晰的。</p>
</div>

.blurred-background {
    position: relative; /* 确保伪元素能够相对于此元素定位 */
    z-index: 1; /* 确保前景内容在伪元素之上 */
    overflow: hidden; /* 防止内容溢出背景区域 */
}
 
.blurred-background::before {
    content: ""; /* 伪元素需要内容来占据空间，但这里使用空字符串 */
    position: absolute; /* 伪元素绝对定位 */
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; /* 伪元素覆盖整个容器 */
    background: url('your-image.jpg') no-repeat center  /* 设置背景图片 center/cover；*/
    filter: blur(10px); /* 应用模糊效果 */
    z-index: -1; /* 确保伪元素在前景内容之下 */
    pointer-events: none; /* 防止伪元素干扰鼠标事件 */
}
 
.blurred-background p {
    position: relative; /* 确保段落内容不被伪元素的z-index影响 */
    z-index: 1; /* 实际上，由于.blurred-background已经有z-index: 1，这里的z-index: 1是多余的，但为了清晰表达层级关系，可以保留 */
}