帶2種不同背景（和2列）的Bootstrap全角

Question

這有點難以解釋，這就是爲什麼我也無法在Google上找到答案。

我正在使用Bootstrap 3，我需要一個全寬的背景圖像。在2個透明的顏色背景之上。我做了一個示例圖像，使其所有清楚：

1 + 2：合併的透明色的背景

3 + 4：合併透明色的背景

1 + 2 + 3 + 4：組合背景圖像（最低層）

有誰知道這是可能的嗎？謝謝你的幫助！

Answer 1

是的，使用此question中列出的技術，但將其擴展到列。

Codepen Demo（下圖）顯示了比Stack Snippet更好的結果，它僅供參考。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    overflow: hidden; 
 
    /* prevent scrollbar */ 
 
} 
 
.container { 
 
    width:80%; 
 
    margin:auto; 
 
    margin-top: 1em; 
 
    
 
    position: relative; 
 
    overflow: visible; 
 
} 
 
.extra:before { 
 
    content: ''; 
 
    display: block; 
 
    /* override bootstrap */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 100vw; 
 
    height: 100%; 
 
    transform: translate(-50%, 0); 
 
    background-image: url(http://lorempixel.com/output/sports-q-c-640-480-7.jpg); 
 
    background-size: 50%; 
 
    background-position: center; 
 
} 
 
[class*="col"] { 
 
    border: 2px solid grey; 
 
    min-height: 320px; 
 
    position: relative; 
 
} 
 
.left:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100vw; 
 
    top: 0; 
 
    right: 0; 
 
    background: rgba(255, 0, 0, 0.5) 
 
} 
 
.right:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100vw; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 255, 0.25); 
 
}

<div class="container extra"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 left"></div> 
 
    <div class="col-sm-8 right"></div> 
 
    </div> 
 
</div>

Codepen Demo

Answer 2

我想我理解了它..感謝Paulie_D

很簡單的例子：

HTML：

<div class="fullwidth"> 
<div class="cell red20">xxx</div> 
<div class="container cell"> 
     <div class="row"> 
     <div class="col-sm-4 red20">xx</div> 
     <div class="col-sm-8 red50">xx</div> 
     </div> 
    </div> 
    <div class="cell red50">xxx</div> 
</div> 

CSS：

.fullwidth { 
    background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg'); 
    display:table; 
    width:100%; 
} 
.cell{ 
    display:table-cell; 
    vertical-align:top; 
} 

.red20{ 
    background-color:rgba(255,0,0,0.2); 
} 

.red50{ 
    background-color:rgba(255,0,0,0.5); 
} 

鏈接的jsfiddle：https://jsfiddle.net/DTcHh/14045/