如何將僞背景顏色擴展到中心容器之外但不是屏幕寬度？

嗨，大家好，我需要你們的幫助，我想這個交替的圖像和文字設計：如何將僞背景顏色擴展到中心容器之外但不是屏幕寬度？

而且我在引導編碼本，這裏是我的代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-2"><img src="images/image.png" class="img1 img-responsive"></div> 
     <div class="col-10"><h4 class="details blue right">Lorem Ipsum text here...</h4></div> 
    </div> 
    <div class="row"> 
     <div class="col-10"><h4 class="details green left">Lorem Ipsum text here...</h4></div> 
     <div class="col-2"><img src="images/image.png" class="img2 img-responsive"></div> 
    </div> 
    <div class="row"> 
     <div class="col-2"><img src="images/image.png" class="img3 img-responsive"></div> 
     <div class="col-10"><h4 class="details orange right">Lorem Ipsum text here...</h4></div> 
    </div> 
</div>

和我CSS：

.container{ 
    max-width:960px; 
} 

.details.left:before{ 
content:""; 
position:absolute; 
height:100%; 
background:inherit; 
width:100%; 
top:0; 
left:0; 
z-index:0; 
overflow:hidden; 
border-top-right-radius:4px; 
border-bottom-right-radius:4px; 
}

我的問題是文本背景的寬度溢出屏幕寬度，它創建一個地平線長卷軸，我如何剪輯背景，所以我不會有滾動？我只希望背景重疊中心容器而不是屏幕寬度。

來源

2017-02-25 Twirlman

不清楚你在問什麼 – neophyte

文本的背景寬度與創建水平滾動的屏幕寬度重疊，我只希望背景與中心容器重疊，而不是屏幕寬度。我如何剪輯它？ – Twirlman

嘗試刪除背景：從您的CSS繼承 – neophyte

我的問題是文本背景的寬度溢出屏幕寬度和它創造了水平滾動，我怎麼剪輯背景，所以我不會有滾動？

環繞你容器外包裝，並給它overflow: hidden，給你的HTML和身體零邊距

HTML

<div class="wrapper"> 
    <div class="container"> 
    .... 
    </div> 
</div>

CSS

html, body { 
    margin: 0; 
} 

.wrapper { 
    overflow: hidden; 
}

我申請這你的fiddle demo here，儘管它看起來遠離你發佈的屏幕轉儲

來源

2017-02-25 18:04:45 LGSon

謝謝LGSon！ – Twirlman

@Twirlman不客氣，請考慮接受我的回答 – LGSon

如何將僞背景顏色擴展到中心容器之外但不是屏幕寬度？

回答

相關問題