如何使用 Bootstrap 3 創建具有透明顏色疊加的全寬背景？

透明顏色疊加的Bootstrap 全寬背景

使用Bootstrap 3 建立具有透明顏色疊加的全角背景影像可能看起來令人畏懼，但透過巧妙的技術是可能的。

要實現這一目標，您將結合使用絕對定位、偽元素和顏色疊加。

HTML 結構：

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

CSS樣式：

.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);
}
.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);
}

說明：

.container元素設定為特定寬度並以自動邊距居中。

加入偽元素 .extra:before 將容器的寬度擴展到視窗之外，創造全角背景的錯覺。

.col 元素被賦予實心邊框以進行視覺化。

.left 和 .right 中的偽元素充當透明顏色疊加層，覆蓋

此技術可讓您輕鬆使用 Bootstrap 3 實現所需的背景和疊加效果。

以上是如何使用 Bootstrap 3 創建具有透明顏色疊加的全寬背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！