具有透明顏色疊加和多列的全寬Bootstrap 背景
在Bootstrap 3 中,實現具有透明背景同時維護多個列可能是一個挑戰。要解決此問題,您可以利用先前查詢中概述的技術並將其擴展為合併列元素。
Codepen 範例中提供的程式碼示範有效地展示了實作。以下是供參考的相關程式碼片段:
1 2 3 4 5 6 | <div class = "container extra" >
<div class = "row" >
<div class = "col-sm-4 left" ></div>
<div class = "col-sm-8 right" ></div>
</div>
</div>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .container {
width: 50%;
margin: auto;
margin-top: 1em;
position: relative;
overflow: visible;
}
.extra:before {
content: '' ;
display: block;
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
}
[ class *= "col" ] {
border: 2px solid grey;
min-height: 120px;
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);
}
|
登入後複製
這種方法涉及建立一個帶有 'extra' 類別的額外元素,作為整個佈局的容器。在這個「額外」元素中,您將擁有具有「容器」類別的主要內容容器。要將彩色覆蓋層放置在列的頂部,您可以在「左」和「右」列類別上使用「:before」偽元素,它允許您在元素的實際內容之前添加內容。透過將這些偽元素的寬度和高度設定為 100vw 和 100%,可以確保它們覆蓋列的整個寬度和高度。最後,您可以使用「rgba()」函數指定透明顏色,其中最後一個值表示透明度等級(0 表示透明,1 表示完全不透明)。
以上是如何建立具有透明疊加層和多列的全寬 Bootstrap 背景?的詳細內容。更多資訊請關注PHP中文網其他相關文章!