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

可以使用gradiant背景。

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

檢查此鏈接的更多信息：CSS: Set a background color which is 50% of the width of the window

Answer 2

可以使內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>