如何实现HTML元素背景色延伸至第二个元素起始位置后再终止？

这个需求完全可行，下面给你几种实用的实现方法，适配常见的页面布局：

方法一：使用伪元素（推荐，不破坏原有DOM结构） #

假设你的.container是固定宽度且居中的布局（比如max-width:1200px; margin:0 auto; padding:0 20px;），可以给第一个红色背景的div添加伪元素，精准控制延伸长度：

修改后的HTML结构 #

<div>
   <div style="background-color:red; position: relative;">
      <div class="container">
         Element 1
      </div>
   </div>
   <div style="background-color:white;">
      <div class="container">
         Element 2
      </div>
   </div>
</div>

配套CSS代码 #

/* 基础container样式（根据你的实际布局调整） */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 红色背景的延伸伪元素 */
div[style="background-color:red; position: relative;"]:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 计算延伸长度：视口右半部分 - container半宽 + container内边距 + 额外延伸长度（这里设为50px） */
  width: calc(50vw - (1200px / 2) + 20px + 50px);
  height: 100%;
  background-color: red;
}

这个方法的好处是完全不影响原有内容的布局，延伸长度会自适应不同屏幕宽度，精准对齐第二个container的左侧后再延伸指定长度。

方法二：负边距+内边距（适合简单纯色背景） #

如果你的布局比较简单，也可以直接通过调整内边距和负边距让背景超出容器：

修改后的HTML结构 #

<div>
   <div style="background-color:red; padding-right: 100px; margin-right: -100px;">
      <div class="container">
         Element 1
      </div>
   </div>
   <div style="background-color:white; position: relative; z-index: 1;">
      <div class="container">
         Element 2
      </div>
   </div>
</div>

这里的100px就是你想要延伸的长度，给第二个div设置z-index:1是为了让它的白色背景覆盖第一个div超出的部分，刚好在指定位置终止红色背景。

方法三：线性渐变背景（适合需要渐变终止的场景） #

如果想要背景色渐变终止，或者更灵活的过渡效果，可以用线性渐变作为背景：

修改后的HTML结构 #

<div>
   <div style="background: linear-gradient(to right, red 0%, red calc(100% + 100px), transparent calc(100% + 100px));">
      <div class="container">
         Element 1
      </div>
   </div>
   <div style="background-color:white; position: relative; z-index: 1;">
      <div class="container">
         Element 2
      </div>
   </div>
</div>

这里的100px是延伸长度，渐变会在红色延伸指定长度后直接变为透明，配合第二个div的白色背景，就能实现精准终止的效果。

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