容器兩側的背景顏色不同

Question

我希望能夠將兩個div背景擴展到頁面的左側和右側，而內容則保留在容器中。到目前爲止，我有。我應該使用變換來將兩個div擴展到頁面的邊緣嗎？由於

<div class="container"> 
<div class="col-lg-4 left"><p>View our rewards scheme</p></div> 
<div class="col-lg-4 center"><p>View our latest offers</p></div> 
<div class="col-lg-4 right"><p>We're hiring apply now</p></div> 
</div> 

Answer 1

擴展的背景色可以用CSS僞元素來完成的外觀 ..

.left:after { 
    background-color:lightblue; 
    left: -999em; 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 999em; 
    top: 0; 
    bottom: 0; 
} 

.right:after { 
    background-color:#4444ff; 
    right: -999em; 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 999em; 
    top: 0; 
    bottom: 0; 
} 

演示：http://www.codeply.com/go/gHFYUnX6hE

Answer 2

據我知道你不能程度的背景超出你的容器的邊框......不過，你可以使用box-shadow屬性（CSS）

MDN: box-shadow

Answer 3

不，背景不能超出他們的容器。

溢出樣式控制元素在內容大於元素的指定大小時如何反應。