仅使用背景颜色填充容器的一半

Question

我有这样的事情：

＆＃13;

＆＃13;

#container {
  width: 300px;
  background-color: red;
  display: flex;
  justify-content: center;
}

#child {
  background-color: green;
  width: 250px;
  height: 150px;
  position: relative;
  top: 75px;
}

＆＃13;

<div id="container">
  <div id="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

红色框是容器，它的高度等于其内容 - 在这种情况下为150px。我想要达到的目的是使容器高度等于其内容大小的一半。

我想要达到的效果是让background-color填充一半的容器内容。

如果这可以通过改变容器高度以外的其他方式进行 - 请随意提出解决方案。

Answer 1

使用线性渐变：

#child {
  background: linear-gradient(to bottom, green 50%, white 0%); 
}

使用正文颜色或您想要的任何颜色更改white。

来源：CSS-Tricks

Answer 2

您可以在此处使用gradients。

不确定是否要将偏移量保持在绿色div之上，但如果是这样，您还可以在渐变内使用calc()：

• 向孩子添加margin-top: 75px
• 在父
上设置background: linear-gradient(red calc(50% + 37px), transparent calc(50% + 37px))

这样你就不必修理任何高度。之后会减轻您的响应工作！

＆＃13;

＆＃13;

#container {
  width: 300px;
  background: linear-gradient(red 50%, transparent 50%);
  display: flex;
  justify-content: center;
}

#child {
  background-color: green;
}

＆＃13;

<div id="container">
  <div id="child">
    content!<br>
    content!<br>
    content!<br>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需为height分配container，然后为height: 200%;设置child，以确保container占height的一半} child：

#container {
  width: 300px;
  height: 75px;
  background-color: red;
  display: flex;
  justify-content: center;
  background-size: 100% 50%;
}

#child {
  background-color: green;
  width: 250px;
  height: 200%;
  position: relative;
  top: 75px;
}

Answer 4

这不是你想要的方式，但结果是一样的。也许它会帮助你。

你可以创建一个伪元素，它的高度是container的一半，并给它一个height 50%;。通过这种方式，background-color container height的一半可以得到不同的#container { width: 300px; background-color: red; display: flex; justify-content: center; position: relative; } #child { background-color: green; width: 250px; height: 150px; position: relative; opacity: .5; top: 75px; z-index: 1; } div#container:after { content: " Different Color! "; color: #ffffff; position: absolute; width: 100%; height: 50%; left: 0; bottom: 0; background: blue; }。

<div id="container">
  <div id="child"></div>
</div>

{{1}}

Answer 5

为什么不只有一个元素并使用线性渐变和多个背景控制颜色：

＆＃13;

＆＃13;

#container {
  width: 300px;
  height:150px;
  background:
  linear-gradient(green,green) 50% 50px/250px 100% no-repeat,
  linear-gradient(red,red)0 0/100% 50% no-repeat;
  display: flex;
  justify-content: center;
}

＆＃13;

<div id="container">

</div>

＆＃13;

＆＃13;

＆＃13;