如何建立具有透明疊加層和多列的全寬 Bootstrap 背景？

具有透明顏色疊加和多列的全寬Bootstrap 背景

在Bootstrap 3 中，實現具有透明背景同時維護多個列可能是一個挑戰。要解決此問題，您可以利用先前查詢中概述的技術並將其擴展為合併列元素。

Codepen 範例中提供的程式碼示範有效地展示了實作。以下是供參考的相關程式碼片段：

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

.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中文網其他相關文章！