CSSベースの背景

Question

divを完全な幅で塗りつぶしたテキストでdivを表示してから、テキストを妨げずに背景色を40％しか表示できません。

テキストが内部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

あなたはグラジエント型のバックグラウンドを使用することができます。

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

詳しい情報については、チェックこのリンクを：CSS: Set a background color which is 50% of the width of the window

Answer 2

次のスニペットのように、負z-indexと所望の幅を制限して、絶対位置内側のDIVを作ることができます。

注：内部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>