REACT - 用容器划分背景颜色

Question

这个问题一直困扰着我，直到今天我都找不到最优化的解决方案。

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

为了更好地说明，这里有一张图片：imagine example

我知道通过使用线性渐变我们可以分割背景，但在 lower/higher 视口中，它会变得棘手。

我希望它不会太混乱而难以理解，如果它太愚蠢，我深表歉意。

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>

Answer 2

好的，我认为最好的方法是采用以下方法：

    <div style="background: linear-gradient(90deg, #8A66B9 50%, #ffff 50%);">
      <div class="container">
        <div class="row">
          <div class="col-7" style="background-color:#8A66B9">
            A
          </div>
          <div class="col-5" style="background-color:#ffff">
            B
          </div>
        </div>
      </div>
    </div>

因此，我有一个背景为 50/50 的 parent DIV。然后，我为每个背景设置背景颜色。

Answer 3

你可以让整个容器都变成橙色，然后在组件 A 之后用一个伪元素覆盖它。这将有蓝色背景，并且比已知需要的更高和更宽，所以它覆盖了从组件 A 的右边界开始的整个容器右侧。

此代码段不得不发明组件的放置方式，但这超出了本问题的范围 - 它只是出于演示目的选择了任意的左侧和顶部位置和大小。

<style>body,
.container,
.A,
.B,
.A::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background: orange;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.A {
  width: 30%;
  height: 30%;
  display: inline-block;
  position: relative;
  top: 10%;
  left: 20%;
  border: solid 1px black;
}

.B {
  width: 20%;
  height: 30%;
  position: absolute;
  display: inline-block;
  left: calc(20% + 30%);
  /* just for demo */
  top: 10%;
  border: solid 1px black;
}

.A::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -100vh;
  left: 100%;
  width: 100vw;
  height: 200vh;
  background: blue;
}

</style>

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
</div>

REACT - 用容器划分背景颜色

REACT - Divide background-color with containers

html

css

reactjs

background-color