Bootstrap 简明教程

Bootstrap - Background

此章节讨论背景色实用类以及可与这些类一起使用的渐变。

This chapter discusses about the background color utility classes and the gradients that can be used with these classes.

Background color

与文本的上下文颜色类相似，您可以应用任意上下文类来设置元素的背景。请记住，背景实用类型不会影响颜色，因此某些情况可能需要使用 [role="bare"]bootstrap_helper_color_&_background.html.text- * 颜色实用类型。

Like the contextual color classes for text, you can apply any contextual class to set the background of an element. Keep in mind that background utilities do not affect color, therefore, certain situations may require the use of [role="bare"]bootstrap_helper_color_&_background.html.text-* color utilities.

我们看一个示例：

Let us see an example:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!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>

Background gradient

添加 .bg-gradient 类时，就会在线性渐变中应用到背景，从部分透明的白色色调开始，逐渐淡化为底部。

The addition of a .bg-gradient class results in a linear gradient being applied to the backgrounds, commencing with a partially transparent white hue that gradually fades towards the bottom.

为了在自定义 CSS 中添加渐变，只需添加 background-image: var(--bs-gradient); 。

In order to add a gradient in your custom CSS, just add background-image: var(--bs-gradient);.

让我们看看 .bg-gradient 类的示例：

Let us see an example of .bg-gradient class:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!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>

Opacity

要更改背景颜色的不透明度，请通过自定义样式或内联样式覆盖 --bs-bg-opacity 或从可用实用类型 .bg-opacity 中进行选择。

To change the opacity of the background color, either override --bs-bg-opacity via custom styles or inline styles or choose from the available utility .bg-opacity.

让我们看看一个 CSS 变量被覆盖的示例：

Let us see an example where the CSS variable is overriden:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!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 被使用的示例：

Let us see an example where .bg-opacity is used:

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

You can edit and try running this code using the *Edit & Run *option.

<!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>