两个并排的盒子上的完整背景答案

【问题标题】：Full blled background onto two side-by-side Boxes两个并排的盒子上的完整背景
【发布时间】：2022-11-29 00:22:08
【问题描述】：

我需要有两个并排的框，背景扩展到整个页面宽度，但文本内容应包含在限制特定大小的主容器内。

我尝试了以下 HTML 代码：

<div class="wrapper">
  <div class="container">
    <section class="left">LEFT</section>
    <section class="right">RIGHT</section>
  </div>
</div>

这里是 sCSS：

.wrapper {
  background: lightgray;
  padding-block: 10px;
  overflow: hidden;
}

.container {
  border: dotted 1px red;
  display: flex;
  max-width: 900px;
  margin-inline: auto;
  
  section {
    padding-block: 100px;
    border: solid 1px blue;
    flex: 1;
    position: relative;
    isolation: isolate;
    
    &.left {
      background: green;
      
      &:before {
        content:"";
        display: block;
        background: green;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 500%;
        z-index: -1;
      }
    }
    
    &.right {
      background: orange;
      
      &:before {
        content:"";
        display: block;
        background: orange;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 500%;
        z-index: -1;
      }
    }
  }
}

Here a working example。您有什么建议可以提供几乎相同结果的更好解决方案吗？

【问题讨论】：

标签： css

【解决方案1】：

您可以在包装器中添加一个额外的 div 并在其上使用线性渐变：

.wrapper {
  background: lightgray;
  padding-block: 10px;
  overflow: hidden;
}

.background {
  background: linear-gradient(to right, green, green 50%, orange 50%, orange 100%);
}

.container {
  border: dotted 1px red;
  display: flex;
  max-width: 900px;
  margin-inline: auto;
}

.column {
  width: 50%;
}

<div class="wrapper">
  <div class="background">
    <div class="container">
      <section class="column left">LEFT</section>
      <section class="column right">RIGHT</section>
    </div>
  </div>
</div>

【讨论】：