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 中添加渐变，只需添加背景图像：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>