您能否避免限制可滚动容器的背景颜色？ [重复]

Question

此问题已经在这里有了答案：

Is it possible to have two background colors for a single html element? [duplicate]（3个答案）

关闭24天前。

我正在努力使相对位置的div的一半具有一种特定的颜色。

我尝试创建另一个div并将其放置在宽度为50％的绝对位置，并放置在右侧，但是我遇到的问题是，由于我的内容是可滚动的，所以每当我到达它开始滚动的位置时，该div的背景停止。

应该提到，我之所以不简单地用一种颜色创建2个div是因为我也将内容放置在中间。

有没有解决的办法？

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  overflow-y: auto;
}

.right-section-background {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background: yellow;
}

.content {
  position: absolute;
}

<div class="wrapper">
  <div class="right-section-background"></div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
  </div>
 </div>

Answer 1

欢迎您！！ >>

我在内容上使用linear-gradient以实现此background-image: linear-gradient(to right, red 50%, yellow 50%);

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  overflow-y: auto;
}


.content {
  position: absolute;
  background-image: linear-gradient(to right, red 50%, yellow 50%);
}
<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
  </div>
 </div>