html - REACT - 将背景颜色与容器分开

Question

我一遍又一遍地面对这个问题，直到今天我都无法找到最优化的解决方案。

假设我有 2 个 DIV，A和B。两个 DIV 都在一个容器内，并为每个 DIV 分配了一组列。为两个 DIV 填充背景颜色的最佳方法是什么，并且它将占据屏幕的剩余左侧和右侧？我的意思是，左侧背景颜色将占据整个左侧 DIV 的宽度 + 元素未使用的剩余左侧宽度。（右侧相同）

这是一个更好的说明图像：想象示例

我知道通过使用线性渐变我们可以分割背景，但在较低/较高的视口中，它可能会变得很棘手。

我希望它不会太令人困惑而无法理解，如果它太愚蠢，我深表歉意。

标签： htmlcssreactjsbackground-color

Answer 1

您不能为容器着色并使 div 透明吗？

<div class="orange-container">
  <div class="transparent-div">
    // Stuff here
  </div>
</div>
<div class="blue-container">
  <div class="transparent-div">
    // Stuff here
  </div>
</div>