CSS filter:blur效果溢出头部侧边栏，overflow:hidden无效如何解决？

原因说明 #

filter: blur() 模糊效果会向元素边界外扩展和模糊半径相等的距离，你当前没有给父容器开启边界裁剪，所以模糊区域就溢出到了头部、侧边栏等外部元素上。如果直接给父容器加overflow: hidden，又会因为伪元素尺寸刚好和父容器一致，边缘的模糊过渡被生硬裁剪，显示效果不好。

修复步骤 #

• 给父容器 .subscribe 添加 overflow: hidden 属性，开启边界裁剪，禁止子元素内容超出父容器范围。如果加了之后不生效，检查是否有更高优先级的样式覆盖了该属性，或者父容器的宽高是否符合预期。
• 调整背景伪元素的尺寸和定位，预留模糊扩展空间：你设置的模糊半径是25px，因此将伪元素宽高各扩大50px（上下、左右方向各预留25px的模糊空间），同时把定位偏移-25px，让模糊区域完整覆盖父容器内部。
• 给内容层 .subscribe__content 新增层级配置，避免内容被绝对定位的背景伪元素遮挡。

修复后完整代码 #

.subscribe{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px 100px;
  /* 新增：开启边界裁剪 */
  overflow: hidden;

  &::before{
    content: '';
    position: absolute;
    /* 调整：偏移25px预留模糊空间 */
    left: -25px;
    top: -25px;
    /* 调整：宽高各扩大50px容纳模糊范围 */
    width: calc(100% + 50px);
    height: calc(100% + 50px);
    background: url('https://i.hurimg.com/i/hdn/75/0x0/5de62c4a0f25441e58232693.jpg') no-repeat center;
    background-size: cover;
    filter: blur(25px);
    opacity: 0.8;
  }
}
/* 新增：内容层提高层级，避免被背景遮挡 */
.subscribe__content {
  position: relative;
  z-index: 1;
}

修改后既不会出现模糊溢出到外部元素的问题，背景边缘的模糊过渡也会保持自然，不会有生硬的裁剪痕迹。

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