首頁 >web前端 >css教學 >如何建立具有透明疊加層和多列的全寬 Bootstrap 背景?

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

Susan Sarandon
Susan Sarandon原創
2024-12-17 13:15:25136瀏覽

How to Create a Full-Width Bootstrap Background with Transparent Overlays and Multiple Columns?

具有透明顏色疊加和多列的全寬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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn