Marquee容器中背景线性渐变效果失效问题排查

核心问题是渐变背景被滚动的图片元素覆盖：.marquee的背景渐变属于容器底层样式，而.track里的图片作为子元素，渲染层级在父元素背景之上，导致渐变完全被图片遮挡，无法实现预期的淡入淡出效果。你尝试添加的#mcover未生效，是因为缺少正确的定位和尺寸设置，无法覆盖在图片上方。

解决方案：使用叠加遮罩层实现渐变效果 #

需要将渐变做成独立的遮罩层，放在图片的上层。具体步骤如下：

1. 给.marquee设置position: relative，作为遮罩层的定位参考容器
2. 用伪元素创建覆盖整个.marquee的渐变遮罩，通过position: absolute和z-index确保它在图片之上
3. 调整渐变的颜色节点，让两侧不透明度为1（与页面背景色一致），中间区域完全透明，实现图片滚动时的边缘淡入淡出

修改后的完整代码 #

CSS 代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  background-color: white;
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: 0.3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: white; /* 保持容器背景与页面一致 */
  position: relative; /* 新增：作为遮罩的定位容器 */
}

/* 新增：渐变遮罩伪元素 */
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%);
  z-index: 10; /* 确保遮罩在图片之上 */
  pointer-events: none; /* 可选：不阻挡图片的交互事件 */
}

.track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rem;
  animation: scroll 20s linear infinite;
  position: relative;
  z-index: 1; /* 确保图片层级在遮罩之下 */
}

.image-marquee img {
  width: 100%;
  height: 6rem;
}

@keyframes scroll {
  from {
    transform: translateX(calc(100% + 18rem));
  }
  to {
    transform: translateX(calc(-100% - 18rem))
  }
}

HTML 代码

<div class="main">
  <div class="marquee">
    <div class="track">
      <div class="image-marquee">
        <img src="https://brandingforthepeople.com/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
      </div>
      <div class="image-marquee">
        <img src="https://media.istockphoto.com/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• .marquee::after伪元素作为独立遮罩，完全覆盖容器区域，通过z-index:10确保在图片上层
• 移除.marquee原有的背景渐变，改用纯色背景+遮罩层分离的方式，避免被图片覆盖
• 给.track设置z-index:1，明确图片的渲染层级在遮罩下方
• pointer-events: none可保证遮罩不会拦截鼠标事件（如果图片需要交互功能）

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