如何实现背景模糊、中间区域正常显示的CSS视觉效果？

你当前的代码逻辑是给中间层添加backdrop-filter: blur()，导致中间区域模糊下方的清晰背景，和需求完全相反。要实现背景模糊、中间清晰的效果，可以通过以下方案解决：

核心思路 #

用伪元素承载整个模糊背景，然后在中间位置放置一个使用相同原图的容器，以此实现“周围模糊、中间清晰”的视觉效果。

修正后的代码 #

<style>
.Parallax{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
/* 伪元素实现全屏模糊背景 */
.Parallax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.pexels.com/photos/2478248/pexels-photo-2478248.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    /* 放大伪元素，避免模糊后边缘出现空白 */
    transform: scale(1.1);
}
.ImageLayer {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('https://images.pexels.com/photos/2478248/pexels-photo-2478248.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* 可选：添加边框和阴影增强层次感 */
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}       
</style>
          
<div class="Parallax">
     <div class="ImageLayer"></div>
</div>

关键细节说明 #

1. 伪元素模糊层：通过::before伪元素创建全屏背景，使用filter: blur()实现模糊效果，transform: scale(1.1)是为了抵消模糊导致的边缘空白问题。
2. 中间清晰层：中间容器使用与伪元素完全一致的背景图、尺寸和定位，确保显示的区域和模糊背景完全对齐，呈现清晰效果。
3. 父容器设置：position: relative确保伪元素和中间层的定位参照正确，overflow: hidden隐藏伪元素缩放后超出容器的部分。

内容的提问来源于stack exchange，提问作者user20389275