如何在两个100vh容器间添加线性渐变叠加层实现整体背景效果？

我懂你想要的那种页面背景从上到下完全连贯，同时两个100vh容器各自保持全屏高度，还能融入绿色叠加区域的效果。其实不用给每个容器单独加渐变，换个思路就能轻松解决：

核心思路 #

把全局渐变背景放在父容器上，让两个子容器（100vh）保持透明，这样渐变会自然贯穿整个页面；然后给需要绿色叠加的容器用伪元素添加一层半透明（或渐变）的绿色层，既不破坏全局渐变，又能实现你要的叠加效果。

完整代码示例 #

HTML结构 #

<body>
  <div class="homepage">
    <div class="container container1">
      <!-- 第一个容器的内容 -->
      <h1>第一屏内容</h1>
    </div>
    <div class="container container2">
      <!-- 第二个容器的内容 -->
      <h1>第二屏内容（带绿色叠加）</h1>
    </div>
  </div>
</body>

CSS样式 #

/* 重置默认样式，确保全屏无间隙 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 父容器：设置全局连贯渐变，高度覆盖两个100vh容器 */
.homepage {
  min-height: 200vh;
  /* 这里替换成你想要的全局渐变，示例是从浅蓝到深蓝 */
  background: linear-gradient(to bottom, #e0f7fa, #00acc1);
}

/* 子容器：统一设置100vh高度，相对定位方便叠加层定位 */
.container {
  height: 100vh;
  position: relative;
  /* 确保内容在叠加层上方 */
  z-index: 1;
}

/* 第一个容器：不需要叠加层，保持透明即可 */
.container1 {
  /* 可选：给内容加个内边距，避免贴边 */
  padding: 2rem;
}

/* 第二个容器的绿色叠加层：用伪元素实现 */
.container2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里设置绿色叠加效果，示例是半透明的深绿，也可以用渐变 */
  background: rgba(46, 125, 50, 0.3);
  /* 把叠加层放在内容下方，不遮挡文字 */
  z-index: -1;
}

/* 第二个容器的内容样式 */
.container2 {
  padding: 2rem;
  color: white; /* 可选：因为叠加层是深色，文字改白色更清晰 */
}

关键细节说明 #

• 父容器的min-height:200vh：因为两个子容器都是100vh，这样父容器高度刚好覆盖两屏，渐变会完整贯穿。
• 伪元素的z-index:-1：确保叠加层在容器内容的下方，不会遮挡文字或其他交互元素。
• 绿色叠加层的rgba值：你可以调整最后一个参数（透明度，0-1）来控制叠加的深浅，也可以换成线性渐变比如linear-gradient(to bottom, rgba(46,125,50,0.2), rgba(46,125,50,0.5))，实现更丰富的叠加效果。
• 如果需要调整渐变的分段位置，比如第一屏是A渐变，第二屏是B渐变，可以给父容器用多色渐变断点，比如background: linear-gradient(to bottom, #e0f7fa 50%, #00acc1 50%)，这样刚好在两屏分界处切换渐变。

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