html - 基于 css 百分比的背景

Question

我怎样才能显示带有一些文本的 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>

Answer 1

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

注意:内层DIV为空，文字只在外层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>