Question

如何显示带有一些文本的div（在宽度上完全填充div），然后显示仅为40％的背景颜色，而不会妨碍文本。

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

＆＃13;

<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>

＆＃13;

Answer 1

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

注意：内部DIV为空，文本仅在外部DIV中，而不在内部DIV中）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用渐变背景。

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

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

基于css百分比的背景

2 个答案: