基于 CSS 百分比的背景

【问题标题】：css percentage based background基于 CSS 百分比的背景
【发布时间】：2017-11-05 16:20:01
【问题描述】：

我怎样才能显示一个带有一些文本的 div（它完全填充了 div 的宽度），然后显示一个只有 40% 的背景颜色，而不妨碍文本。

以下是有问题的，因为文本在内部 div 内。可以这么说，我希望它在外部 div 中。

<div>
<div style="background-color:#EAFEE2; width:35%;"><span>This is a much longer text and takes up a lot of space</span></div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用渐变背景。

background:linear-gradient(90deg, #EAFEE2 40%, #FFFFFF 50%)

查看此链接了解更多信息：CSS: Set a background color which is 50% of the width of the window

【讨论】：

【解决方案2】：

您可以使内部 DIV 绝对定位，使用负数 z-index 和所需的宽度限制，如下面的 sn-p 所示。

注意：内层DIV为空，文字只在外层，内层没有）

.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: #EAFEE2;
  z-index: -1;
}

<div class="outer">
<div class="inner"></div>
This is a much longer text and takes up a lot of space
</div>

【讨论】：