添加blur滤镜致下方div渐变模糊的原因及解决方法

给.hero-banner-fourteen的伪元素添加blur滤镜后，下方的.fancy-feature-thirtySix容器出现类似线性渐变的模糊效果，希望实现两个容器之间的清晰分界，请问该现象的原因是什么？如何解决？

相关代码 #

CSS代码 #

.hero-banner-fourteen::before{
  background-image: url("../images/moje_slike/video7.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -20px;
}

.hero-banner-fourteen {
  position: relative;
  padding: 200px 0 130px;
  z-index: 2;
  height: 100vh;
}

.hero-banner-fourteen::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px); /* 添加此滤镜后下方容器出现异常 */
}

HTML代码 #

<div class="hero-banner-fourteen lg-container" id="home">
  <div class="container">
    <HeroBanner />
    <div class="screen-holder">
      <svg src="images/shape/241.svg" alt="" class="img-meta" />
    </div>
  </div>
</div>
<div
  class="fancy-feature-thirtySix lg-container pt-170 pb-110 md-pt-120 md-pb-60"
  id="product"
>
  <div class="container position-relative">
    <div class="row">
      <div
        class="col-xl-3 col-lg-4"
        data-aos="fade-right"
        data-aos-duration="1200"
      >
        <div class="title-style-eleven md-mb-40 text-center text-lg-left">
          <h2 class="text-white">Our latest Arrival.</h2>
        </div>
      </div>
      <div class="col-xl-9 col-lg-8">
        <div class="product_slider_one vr-landing-slider">
          <LatestProduct />
        </div>
      </div>
    </div>
  </div>
</div>

效果截图 #

这种现象的核心是模糊滤镜的视觉溢出：

• 当元素设置filter: blur()时，模糊效果会向四周扩散，超出元素自身的边界范围。
• 你的伪元素设置了margin: -20px，让它的尺寸比父元素.hero-banner-fourteen更大，同时父元素没有设置overflow: hidden，导致模糊的边缘直接溢出到下方的.fancy-feature-thirtySix容器区域，看起来像是下方容器被渐变模糊了。

最直接有效的方案是给父元素.hero-banner-fourteen添加overflow: hidden，裁剪掉伪元素溢出的模糊边缘：

.hero-banner-fourteen {
  position: relative;
  padding: 200px 0 130px;
  z-index: 2;
  height: 100vh;
  overflow: hidden; /* 添加这一行 */
}

• 即使保留伪元素的margin: -20px来扩大背景范围，overflow: hidden依然会把超出父元素的模糊部分完全裁剪，只保留父元素范围内的模糊背景，同时和下方容器形成清晰的分界。

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