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

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

Susan Sarandon
發布: 2024-12-17 13:15:25
原創
136 人瀏覽過

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板