Bootstrap - 背景

上一頁
下一頁

本章討論背景顏色實用工具類以及可以與這些類一起使用的漸變。

輔助功能提示：僅使用顏色作為背景只能提供視覺指示，這對螢幕閱讀器等輔助技術的使用者沒有幫助。確保內容本身含義清晰。

使用替代方法，使用.visually-hidden 類來增加內容的清晰度。

背景顏色

與文字的上下文顏色類一樣，您可以應用任何上下文類來設定元素的背景。請記住，背景實用工具不會影響顏色，因此，某些情況下可能需要使用.text-* 顏色實用工具。

讓我們來看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Background color utilities</h4>  
     
    <!--success color-->
    <div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>
    <div class="p-3 mb-2 bg-success-subtle text-emphasis-success">background utility subtle--> .bg-success-subtle</div>
    <!--warning color-->
    <div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>
    <div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">background utility subtle --> .bg-warning-subtle</div>
    <!--info color-->
    <div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>
    <div class="p-3 mb-2 bg-info-subtle text-emphasis-info">background utility subtle--> .bg-info-subtle</div>
    <!--dark color-->
    <div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>
    <div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">background utility subtle--> .bg-dark-subtle</div>
    <!--primary color-->
    <div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>
    <div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">background utility subtle--> .bg-primary-subtle</div>
    <!--light color-->
    <div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>
    <div class="p-3 mb-2 bg-light-subtle text-emphasis-light">background utility subtle--> .bg-light-subtle</div>
    <!--secondary color-->
    <div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">background utility subtle--> .bg-secondary-subtle</div>
    <!--body color-->
    <div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>
    <div class="p-3 mb-2 bg-black text-white">background utility subtle--> .bg-black</div>
    <!--danger color-->
    <div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>
    <div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">background utility subtle--> .bg-danger-subtle</div>
    <!--white color-->
    <div class="p-3 mb-2 bg-white text-dark">background utility --> .bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-body">background utility subtle--> .bg-transparent</div>
    <!--secondary and tertiary color-->
    <p class="p-3 mb-2 bg-body-secondary">background utility --> .bg-body-secondary</p>
    <p class="p-3 mb-2 bg-body-tertiary">background utility --> .bg-body-tertiary</p>
  </body>
</html>

背景漸變

新增.bg-gradient類會在背景上應用線性漸變，從部分透明的白色開始，逐漸淡化到底部。

要在自定義 CSS 中新增漸變，只需新增background-image: var(--bs-gradient);。

讓我們來看一個.bg-gradient類的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
	<div class="container mt-3">
    <h4>Background color utilities</h4>  
     
    <!--success color-->
    <div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>
    <div class="p-3 mb-2 bg-success bg-gradient text-white">background gradient utility --> .bg-success bg-gradient</div>
    <!--warning color-->
    <div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>
    <div class="p-3 mb-2 bg-warning bg-gradient text-emphasis-warning">background gradient utility --> .bg-warning bg-gradient</div>
    <!--info color-->
    <div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>
    <div class="p-3 mb-2 bg-info bg-gradient text-emphasis-info">background gradient utility--> .bg-info bg-gradient</div>
    <!--dark color-->
    <div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>
    <div class="p-3 mb-2 bg-dark bg-gradient text-white">background gradient utility --> .bg-dark bg-gradient</div>
    <!--primary color-->
    <div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>
    <div class="p-3 mb-2 bg-primary bg-gradient text-white">background gradient utility--> .bg-primary bg-gradient</div>
    <!--light color-->
    <div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>
    <div class="p-3 mb-2 bg-light bg-gradient text-emphasis-light">background gradient utility--> .bg-light bg-gradient</div>
    <!--secondary color-->
    <div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary bg-gradient text-white">background gradient utility--> .bg-secondary bg-gradient</div>
    <!--body color-->
    <div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>
    <div class="p-3 mb-2 bg-black bg-gradient text-white">background gradient utility--> .bg-black bg-gradient</div>
    <!--danger color-->
    <div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>
    <div class="p-3 mb-2 bg-danger bg-gradient text-white">background gradient utility--> .bg-danger bg-gradient</div>
    </div>
	</body>
</html>

不透明度

要更改背景顏色的不透明度，可以透過自定義樣式或內聯樣式覆蓋--bs-bg-opacity，或者從可用的實用工具.bg-opacity中選擇。

讓我們來看一個覆蓋 CSS 變數的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Background opacity - override CSS variable</h4>
    <div class="bg-danger p-2 text-white">Default danger background</div>
    <div class="bg-danger p-2" style="--bs-bg-opacity: .5;">50% opacity of danger background</div>
    </div>
  </body>
</html>

讓我們來看一個使用.bg-opacity的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
    <h4>Background opacity utility</h4>
    <div class="bg-primary p-2 text-white">Primary default background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-10">10% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-25">25% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-50">50% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-75">75% opacity primary background</div>
    </div>
  </body>
</html>
列印頁面
上一頁
下一頁
廣告