featureSection伪元素模糊效果仅底部生效，求助解决方案

问题描述 #

我给带有线性渐变动画背景的featureSection添加了上下模糊过渡效果，但只有下半部分的模糊生效，上半部分完全看不到效果，调整::before伪元素的偏移参数也无法解决。

原因分析 #

1. 原代码中featureSection自身带有渐变背景，伪元素通过background: inherit继承背景后，因z-index: -1位于父元素下方，上半部分的模糊区域被文档流中在前的.top section背景覆盖。
2. 父元素自身的实色渐变背景也会一定程度上遮挡伪元素的模糊效果，导致模糊扩散无法正常显示。

解决方案 #

1. 转移渐变背景到伪元素 #

将featureSection自身的渐变背景和动画移到::before伪元素中，让父元素背景透明，避免遮挡模糊效果：

.featureSection {
  display: flex;
  flex-direction: column;
  background: transparent; /* 改为透明背景 */
  padding: 0% 2.5%;
  color: #f9faf8;
  align-items: center;
  justify-content: center;
  font-weight: unset;
  position: relative; 
}

.featureSection::before {
  content: "";
  position: absolute;
  top: -40px; /* 增大向上偏移量，确保模糊区域足够显示 */
  left: -50px; 
  right: -50px; 
  bottom: -40px; 
  background-size: 400%;
  background-image: linear-gradient(45deg, #5c2774, #335cc5, #637ffd);
  animation: bg-animation 7s infinite alternate;
  filter: blur(13px);
  z-index: -1;
  border-radius: inherit;
}

2. 消除上方section的底部间距 #

给上方的.top section设置margin-bottom: 0，避免底部空白或背景覆盖模糊区域：

.top {
  margin-bottom: 0;
}

3. 确保内容层级高于模糊背景 #

给内容容器#featureContent添加相对定位和更高的z-index，保证内容正常显示在模糊背景之上：

#featureContent {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 5% 0%;
  position: relative;
  z-index: 1;
}

4. 补充动画关键帧（若未定义） #

如果之前没有定义bg-animation关键帧，需要添加以下代码：

@keyframes bg-animation {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

内容的提问来源于stack exchange，提问作者Mohammed Aayan Pathan