如何使用CSS将背景样式应用于HTML元素

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

在构建网站时，背景样式在设计的视觉美感中起着重要作用。无论您是构建按钮还是大型交互区域，背景样式都可以提供定义并区分特定用途的区域。了解 CSS 中的背景属性系列可以帮助您创建更高效的代码和视觉上有趣的设计。

在本教程中，您将创建一个元素网格，每个元素都展示了将背景应用于元素的不同方式。通过创建一组分组的示例，您最终将获得一个参考工具和一个试验不同背景属性的地方。您将创建一张包含 18 种背景颜色、图像和渐变变化的表格。每个变体都将使用与背景相关的属性来实现特定的效果。最后一个变体将在单个元素上结合多种方法，创建多背景效果。

先决条件

了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
类型选择器、组合选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
熟悉颜色值，你可以在 How To Use Color Values with CSS 中找到。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何使用 HTML 构建网站系列。

设置初始 HTML 和 CSS

要开始使用背景样式，您将首先设置您将在本教程的其余部分处理的 HTML 和 CSS 代码。在本节中，您将编写所有必要的 HTML 和一些初始 CSS 样式，这些样式将处理布局并为视觉美学奠定基础。

首先在文本编辑器中打开 index.html。然后，将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

接下来，转到 <head> 标记并添加 <meta> 标记以定义 HTML 文件的字符集。设置页面的标题，添加一个 <meta> 标签来定义移动设备应该如何呈现页面，最后加载您稍后将使用 <link> 标签制作的 CSS 文件。

这些添加在以下代码块中突出显示。随着代码的添加和更改，您将在整个教程中遇到这种突出显示方法：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Background Styles Resource</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

添加 <head> 内容后，移动到 <body> 元素，您将在其中为我们的网格添加标题和基础 <div>。将此代码块中突出显示的部分添加到文本编辑器中的 index.html 文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Background Styles Resource</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Background Styles Resource</h1>
    <div class="grid">
    </div>
  </body>
</html>

<h1> 提供了描述页面内容的标题。具有 grid class 属性的 <div> 元素将包含整个教程中添加的所有剩余 HTML。

将更改保存到 index.html 并在文本编辑器中保持打开状态。然后，继续在您的网络浏览器中打开 index.html。在本教程中，您将在文本编辑器和浏览器之间来回切换，以验证对代码所做的更改。

接下来，返回文本编辑器并创建一个名为 styles.css 的文件。这是您在 index.html 中的 <head> 元素中引用的文件。在 styles.css 文件中，添加以下代码：

样式.css

body {
  font-family: system-ui, sans-serif;
  color: #333;
}

h1 {
  text-align: center;
}

body 元素选择器将页面的字体从默认衬线更改为操作系统的字体（如果支持），然后回退到无衬线字体。 h1 选择器使页面上的文本居中。

接下来，您将向 .grid 类选择器添加一个 CSS Grid，这是一个综合布局属性的集合。以下代码块的突出显示的 CSS 指示将添加到 styles.css 的内容：

样式.css

...
h1 {
  text-align: center;
}

.grid {
  width: 90%;
  max-width: 80rem;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-gap: 1.5rem;
}

此选择器上的属性将设置灵活的 width 和 max-width，以便您可以调整页面大小并调整宽度。它还将设置一个 margin 属性来设置网格上方和下方的空间。然后，您将应用定义网格所需的属性。

display 属性使元素使用具有 grid 值的 CSS 网格。设置好之后，其他两个属性 grid-template-columns 和 grid-gap 现在将影响 .grid 元素的内容，您将在稍后添加。 grid-template-columns 声明将有 3 列，并且它们必须具有 100px 的最小宽度和 1fr 的最大宽度（分数）整个宽度。由于有三列，该分数将为 33.333%。最后，grid-gap 定义网格的每一行和每一列之间，有 1.5rem 间距。

接下来，您将为 HTML 添加另外两个类选择器，您将在后面的部分中编写。添加一个 .item 类选择器，它将应用于每个变体的网格项。然后，添加一个 .preview 类选择器，其中将包含背景样式演示。以下代码块中突出显示的 CSS 演示了如何设置它：

样式.css

...
.grid {
  ...
}

.item {
  border: 1px solid #999;
  background-color: white;
}

.preview {
  height: 16rem;
  border-bottom: 1px solid #999;
}

您现在已经为 index.html 和 styles.css 文件设置了起点。在继续之前，请务必保存对这两个文件的更改。

对于本教程设置的最后一部分，在您的 index.html 和 styles.css 文件旁边创建一个名为 images 的新目录（或文件夹）。下载以下每个图像并将它们添加到这个新创建的 images 目录中：

可重复模式：另存为pattern.png。
X轴重复图案：另存为pattern-x.png。
Y轴重复图案：另存为pattern-y.png。
蜂鸟照片：另存为photo.jpg。（照片由 Mark Olsen 在 Unsplash 上拍摄）

在本节中，您准备了 HTML 和 CSS，它们将在本教程的其余部分中支持您的代码。您还下载了演示图像并将它们添加到 index.html 和 styles.css 文件旁边的 images 目录中。在下一节中，您将设置 background-color 和 background-image。

在元素上使用 `background-color` 和 `background-image`

您可以使用两种类型的背景之一填充 HTML 元素：颜色或图像。 CSS 生成的渐变是一种图像，稍后将在教程中介绍。在本节中，您将对元素应用颜色背景，然后将图像文件加载为元素的背景。

首先在文本编辑器中打开 index.html 并在 <div class="grid"> 元素中添加以下代码块中突出显示的 HTML：

索引.html

...
<div class="grid">
  <div class="item">
    <div class="preview style-01"></div>
    <div class="item-info">
      <h2>Background Color</h2>
    </div>
  </div>
</div>
...

您将为在整个教程中创建的每个变体使用此 HTML 格式。不同变体的变化是 class 属性值，它将增加每个变体的数字。 <h2> 元素将具有该变体的相应标题。

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。

在 .preview 类选择器之后，添加一个名为 .style-01 的新类选择器。然后，在新的选择器块中，添加一个命名值为 deeppink 的 background-color 属性。以下代码块中突出显示的 CSS 显示了它的外观：

样式.css

...
.preview {
  height: 16rem;
}

.style-01 {
  background-color: deeppink;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。您现在将在第一个变体中获得粉红色图像，如下图所示：

background-color 属性将接受任何有效的 CSS 颜色，包括具有 alpha 通道的颜色，例如 RGBA 和 HSLA。您可以使用 Alpha 通道为背景颜色提供透明度。

接下来，返回到 index.html 并添加一个新的变体，这次将类递增到 style-02。还将 <h2> 元素的文本设置为 Background Image。以下代码块中突出显示的 HTML 演示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-02"></div>
    <div class="item-info">
      <h2>Background Image</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。添加一个 .style-02 类选择器，然后添加一个 background-image 属性。要加载 photo.jpg 文件作为背景，首先创建一个 url() 函数作为值。然后，在 url() 函数的括号内，添加文件路径，如以下代码块中突出显示的 CSS 所示：

样式.css

...
.style-01 {
  ...
}

.style-02 {
  background-image: url("./images/photo.jpg");
}

保存对 styles.css 的更改，然后在 Web 浏览器中刷新 index.html。预览区域将只显示 photo.jpg 图像的一部分，因为图像的大小大于预览区域的大小。默认情况下，背景图像以其原始像素尺寸显示，导致图像不完全可见。下图演示了它在浏览器中的显示方式：

在本节中，您将设置前两个背景变体。第一个使用 background-color 属性，第二个使用 background-image 属性。接下来，您将创建四个变体来为 background-repeat 属性使用不同的值。

使用 `background-repeat` 属性平铺图像

现在您可以将背景图像加载到元素上，您现在将使用不同的方法来使用重复图案图像平铺图像。默认情况下，background-image 沿 x 轴和 y 轴以平铺模式重复，但您可以控制该重复仅沿单个轴重复，或根本不重复。在本节中，您将使用 background-repeat 属性来控制四种不同的重复场景。

首先，在您的文本编辑器中打开 index.html 并在网格中添加一个新项目，其类别为 style-03 和 <h2> 和 Background Repeat。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-03"></div>
    <div class="item-info">
      <h2>Background Repeat</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。为 .style-03 创建一个类选择器。在选择器块中，添加一个 background-image 和一个 url() 函数，该函数从 images 文件夹中加载 pattern.png 图像，如以下代码块中突出显示的那样：

样式.css

...
.style-02 {
  ...
}

.style-03 {
  background-image: url("./images/pattern.png");
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。 pattern.png 图像将被设置为一个可重复的平铺，看起来像一个填充整个元素的无止境图像。该元素的样式将出现在浏览器中，如下图所示：

需要注意的是，此图像从左上角重复，并不断向右侧和底部扩展。这是任何 background-image 的默认状态，它可以创建像这样的无缝模式或更严格的重复。创建此默认值的属性是将 background-repeat 设置为 repeat 的值。

使用 background-repeat 属性，您还可以创建仅从左到右重复的无缝图案。有各种效果可以使用这种重复，例如沿容器顶部的锯齿状形状，就像撕裂的穿孔边缘一样。您还可以使用它在底部制作一个从头到尾的风格化双线图形。通过将 background-repeat 属性设置为 repeat-x，您可以告诉浏览器仅沿 x 轴重复背景。

要开始沿 x 轴工作，请在文本编辑器中返回 index.html。然后，将一个新的 HTML 块添加到网格中，其类为 style-04 和一个 <h2> 和 Background Repeat X。以下代码块中突出显示的 HTML 演示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-04"></div>
    <div class="item-info">
      <h2>Background Repeat X</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html 并在文本编辑器中打开 styles.css。创建一个带有 background-image 属性的 .style-04 类选择器，加载 images 目录中的 pattern-x.png 文件。此图像旨在沿元素的顶部 x 轴重复。接下来，添加一个值设置为 repeat-x 的 background-repeat 属性，如以下代码块中突出显示的那样：

样式.css

...
.style-03 {
  ...
}

.style-04 {
  background-image: url("./images/pattern-x.png");
  background-repeat: repeat-x;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。默认情况下，重复的背景图像从元素的左上角开始。因此，图案将沿着预览元素区域的顶部从左到右重复，如下图所示：

正如背景可以设置为从左到右重复一样，也可以设置为从上到下重复。您可以通过将 background-repeat 属性设置为 repeat-y 来执行此操作，这将在单个列中沿 y 轴重复图像。这对于沿着容器的左侧或右侧边缘创建视觉效果很有用。

要开始使用 y 轴，请在文本编辑器中打开 index.html 并向网格中添加一个新项目，其类别为 style-05 和 <h2> 和 [ X145X]。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-05"></div>
    <div class="item-info">
      <h2>Background Repeat Y</h2>
    </div>
  </div>
</div>
...

然后，将更改保存到 index.html 并在文本编辑器中打开 styles.css。与 x 轴示例一样，为 .style-05 创建一个类选择器并添加一个 background-image 属性。这次，将 background-image 值设置为指向 pattern-y.png 图像。然后，添加 background-repeat 属性并将值设置为 repeat-y，如以下代码块中突出显示的那样：

样式.css

...
.style-04 {
  ...
}

.style-05 {
  background-image: url("./images/pattern-y.png");
  background-repeat: repeat-y;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。该图案现在将沿着预览元素的左边缘向下重复，如下图所示：

通常，根本不重复背景图像很有用。这可能发生在将视觉图形添加为背景而不是 HTML <img /> 的情况下，例如有时使用徽标或图标来完成。通过将 background-repeat 属性设置为 no-repeat 值，可以完全禁用重复。

首先，在您的文本编辑器中返回 index.html 并使用 style-06 类和具有 Background No Repeat 的 <h2> 元素将另一个项目添加到网格中。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-06"></div>
    <div class="item-info">
      <h2>Background No Repeat</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html 并在文本编辑器中打开 styles.css。添加 .style-06 类选择器，并与该部分的第一个变体一样，创建一个 background-image 属性，将 pattern.png 文件加载为背景图像。接下来，添加一个 background-repeat 属性设置为值 no-repeat。图像只会显示一次，而不是连续平铺重复。以下代码块中突出显示的 CSS 演示了它在 styles.css 文件中的显示方式：

样式.css

...
.style-05 {
  ...
}

.style-06 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。现在将在预览元素的左上角有一个 pattern.png 图像的实例，如下图所示：

在本节中，您使用了 background-repeat 属性的默认值 repeat。您还使用 repeat-x 值水平重复平铺图像，并使用 repeat-y 值垂直重复平铺图像。最后，您使用 no-repeat 值完全阻止了图像重复。在下一节中，您将使用 background-position 属性来设置背景图像在元素上的锚定位置。

使用 `background-position` 调整背景图像的位置

使用 background-image 时，重要的是要知道图像默认位于元素的左上角。但是，这可能不是您想要在元素中设置背景图像的地方，尤其是在图像不重复的情况下。在本节中，您将使用 background-position 属性来更改图像的初始实例在元素中的锚定位置。

要开始使用 background-position，请在文本编辑器中打开 index.html 并向网格中添加一个新项目，其类别为 style-07 和 <h2> 与 [ X147X]。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-07"></div>
    <div class="item-info">
      <h2>Background Position</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。

为 .stlye-07 创建一个类选择器。对于本节中的每个 CSS 块，为 background-image 加载 pattern.png 文件，并将 background-repeat 属性设置为 no-repeat，以便定位更易识别。最后，添加一个 background-position 属性并使用 bottom right 的命名值将图像锚定到默认的相邻角。以下代码块中突出显示的 CSS 指示了如何编写：

样式.css

...
.style-06 {
  ...
}

.style-07 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
  background-position: bottom right;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。现在预览元素的右下角显示了 pattern.png 文件的单个实例，如下图所示：

background-position 属性可以接受两个命名值，每个轴一个。对于 x 轴，这些值为 left、center 和 right。对于 y 轴，值为 top、center 和 bottom。两个轴都存在 center 命名值，并且可以组合以将背景图像定位在元素的绝对中间。

要使背景图像居中，首先在文本编辑器中打开 index.html，然后使用 style-08 类和具有 Background Position Center。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-08"></div>
    <div class="item-info">
      <h2>Background Position Center</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。创建一个 .style-08 类选择器并添加 background-image 属性加载 pattern.png 和 background-repeat 属性设置为 no-repeat 与之前的变体一样。您可以将 background-position 属性设置为 center 的单个命名值，浏览器将理解将此名称用于 x 轴和 y 轴位置。以下代码块的突出显示的 CSS 显示了它是如何设置的：

样式.css

...
.style-07 {
  ...
}

.style-08 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
  background-position: center;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。 pattern.png 的单个实例现在浮动在预览元素的中心，如下图所示：

您还可以使用数值和命名值来定义 background-image 的起始位置。当您想要将背景图像从元素的边缘偏移一定量或相对量时，这可能很有用。

首先，在您的文本编辑器中返回 index.html 并将另一个项目添加到网格中，该项目具有 style-09 类和具有 Background Position Numeric 的 <h2> 元素。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-09"></div>
    <div class="item-info">
      <h2>Background Position Numeric</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html 并在文本编辑器中打开 styles.css。接下来，创建一个具有 background-image 属性的 .style-09 类选择器，该属性加载 pattern.png 文件和具有 no-repeat 值的 background-repeat 属性。然后，添加一个值为 right 10% bottom 40px 的 background-position 属性，如以下代码块中突出显示的那样：

样式.css

...
.style-08 {
  ...
}

.style-09 {
  background-image: url("./images/pattern.png");
  background-repeat: no-repeat;
  background-position: right 10% bottom 40px;
}

background-position 属性的 right 10% 部分将从右侧锚定元素宽度的 background-image 10% of。然后，bottom 40px 将 background-image 设置为距离元素底部 40px。

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。图案图像现在将位于元素的右下部分，但与边缘有一些间距，如下图所示：

在本节中，您使用 background-position 属性使用单词值（例如 bottom 和 center）以及与词值。在下一节中，您将使用 background-size 属性来调整元素内背景图像的大小。

使用 `background-size` 属性调整背景图像的大小

作为元素背景加载的图像以它们的全像素尺寸放置。例如，如果用于背景的图像文件的像素尺寸为 800⨉600，但它应用到的元素是 400⨉300，则背景图像将可见 25% of。在本节中，您将使用 background-size 属性来调整 background-image 文件的大小。

要开始调整 background-image 的大小，请在文本编辑器中打开 index.html。然后，向网格添加一个新项目，其类别为 style-10 和一个 <h2> 和 Background Size Contain。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-10"></div>
    <div class="item-info">
      <h2>Background Size Contain</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。

为 .style-10 创建一个类选择器。在选择器块内，将蜂鸟的 photo.jpg 图像加载为 background-image。接下来，将 background-repeat 属性设置为 no-repeat 并将 background-position 设置为 center，这样您就只有一个以元素为中心的图像迭代。最后，添加一个 background-size 属性并使用命名值 contain，如以下代码块中突出显示的：

样式.css

...
.style-09 {
  ...
}

.style-10 {
  background-image: url("./images/photo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。图像现在将按比例缩小以完全包含在元素中，正如 contain 的 background-size 命名值所暗示的那样。蜂鸟的图像现在完全可见，而没有 background-size 时只显示了一小部分。下图演示了它在浏览器中的显示方式：

接下来，您将设置 background-size 值以调整大小，使其完全覆盖元素的背景空间。首先在您的文本编辑器中打开 index.html，然后使用 style-11 类和带有 Background Size Cover 的 <h2> 元素将另一个项目添加到网格中。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-11"></div>
    <div class="item-info">
      <h2>Background Size Cover</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html 并在文本编辑器中打开 styles.css。接下来，创建一个 .style-11 类选择器并从 .style-10 选择器块复制相同的 background-image、background-repeat 和 background-position 属性。然后，使用命名值 cover 添加一个 background-size 属性。以下代码块中突出显示的 CSS 演示了如何在文本编辑器中编写它：

样式.css

...
.style-10 {
  ...
}

.style-11 {
  background-image: url("./images/photo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。

background-image 现在将填充整个元素，但会按比例缩小以适合。 cover 值将根据元素的方向调整 background-image 的大小。如果元素是横向，意味着它的宽度大于高度，则 background-image 将调整大小，使宽度与元素相同。在这种情况下，这会导致 background-image 的高度高于元素，因此会被元素的边界截断。下图演示了 background-image 和 cover 的 background-size 将如何出现在浏览器中：

最后，background-size 值也可以接受数值。要使用数值，请在文本编辑器中返回 index.html。接下来，向网格添加一个新项目，其类为 style-12 和一个 <h2> 元素，其为 Background Size Numeric。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-12"></div>
    <div class="item-info">
      <h2>Background Size Numeric</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。创建一个 .style-12 类选择器。再一次，复制在 .style-10 和 .style-11 上使用的相同的 background-image、background-repeat 和 background-position 属性并将它们添加到选择器.style-12 的块。

然后，添加数值为 30% 的 background-size 属性。当您将 background-size 属性作为单个数值提供时，它将对图像的高度和宽度应用相同的值。要保持图像的纵横比，请在 30% 之后添加单词 auto，然后将图像的宽度设置为 30%，并按比例设置高度。突出显示的 CSS 指示 .style-12 选择器块和属性将如何出现在您的文本编辑器中：

样式.css

...
.style-11 {
  ...
}

.style-12 {
  background-image: url("./images/photo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30% auto;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。蜂鸟的图像现在按其在元素中心的宽度按比例缩放 30% of，如下图所示：

在本节中，您使用 backround-size 属性缩放背景图像，使其在具有 contain 值的元素中完全可见。您使用 cover 属性来缩放背景图像以调整大小，以便在覆盖整个元素的同时显示尽可能多的图像。最后，您使用数值将背景图像缩放到设定大小，并使用 auto 值保持缩放比例。在下一节中，您将使用 background-attachment 属性来防止背景图像与其元素一起滚动。

使用 `background-attachment` 属性附加背景图像

background-attachement 属性使 background-image 静止。这会产生一种效果，其中内容在图像上滑动，就好像它漂浮在其上方一样。在本节中，您将使用 background-attachment 属性来创建此效果。

首先，在您的文本编辑器中打开 index.html 并向网格中添加一个新项目，其类别为 style-13 和一个 <h2> 和 Background Attachment。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-13"></div>
    <div class="item-info">
      <h2>Background Attachment</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。

创建一个 .style-13 类选择器。在选择器块中，添加一个 background-image 属性，该属性从 images 目录加载 pattern.png 文件。将此图像与默认值一起使用，以便图像重复以填充整个元素。最后，添加命名值为 fixed 的 background-attachment 属性，如以下代码块中突出显示的：

样式.css

...
.style-12 {
  ...
}

.style-13 {
  background-image: url("./images/pattern.png");
  background-attachment: fixed;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。当您向下滚动页面时，此变体的预览区域可能看起来更像是一个可以看到其背后背景的窗口。使用此属性时要考虑的重要一点是图像固定到浏览器视口，而不是元素。这将影响 background-position，因为它会更改确定位置的原点。下面的动画在浏览器中演示了这种效果：

在本节中，您将 background-attachment 属性与 fixed 值一起使用，以防止背景图像随其元素一起滚动。在下一节中，您将把所有前面的属性组合到 background 简写属性中。

将属性组合到 `background` 属性中

到目前为止的所有 CSS 属性都可以组合成一个 background 简写属性。在本节中，您将使用此速记属性创建两个变体，以了解正常用法以及应用 background-size 值时的特殊注意事项。

注意： 请记住，使用 background 速记可以覆盖某些属性值，即使没有显式声明。例如，background 将覆盖 background-image 值，即使在速记值中没有提供图像也是如此。

要开始使用速记，请在文本编辑器中打开 index.html 并向网格中添加一个新项目，其类别为 style-14 和 <h2> 和 Background Shorthand . 以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-14"></div>
    <div class="item-info">
      <h2>Background Shorthand</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。创建一个 .style-14 类选择器并在选择器块中添加 background 简写属性。对于该值，添加一个从 images 目录加载 pattern.png 的 url() 函数。在函数之后，添加一个空格并添加命名值 center，这将应用一个 background-position 值。接下来，添加另一个具有命名值 repeat-x 的空格。最后，添加一个命名颜色值 gold 并用分号结束该行，如以下代码块中突出显示的那样：

样式.css

...
.style-13 {
  ...
}

.style-14 {
  background: url("./images/pattern.png") center repeat-x gold;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。 pattern.png 图像已加载，并且由于 center 和 repeat-x 值，仅在预览元素的垂直中心从左到右重复。此外，预览元素使用纯色 gold 填充，如下图所示：

对于 background 速记，值可以是任何顺序。图像不必排在第一位，颜色也不必排在最后。但是在将 background-size 应用于速记时，此规则有一个例外。在这种情况下，background-size 值必须在 background-position 值之后，并且不是用空格而是用正斜杠符号 (/) 分隔。

返回文本编辑器中的 index.html 文件。然后，向网格添加一个新项目，其类别为 style-15 和一个 <h2> 和 Background Shorthand with Size。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-15"></div>
    <div class="item-info">
      <h2>Background Shorthand with Size</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html 并在文本编辑器中打开 styles.css。然后，添加具有 background 速记属性的 .style-15 类选择器。对图像使用相同的 url('./images/pattern.png)。然后将位置值设置为 center，后跟一个空格，然后是一个正斜杠 (/)。在正斜杠之后，添加另一个空格，然后将 64px 作为 background-size 的值。由于 background-size 值使用单个值，因此背景图像的高度和宽度都将设置为 64px。最后，添加一个空格和深灰色的简写十六进制值：#222。突出显示的 CSS 显示了它在 styles.css 文件中的显示方式：

样式.css

...
.style-14 {
  ...
}

.style-15 {
  background: url("./images/pattern.png") center / 64px #222;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。此变体的预览元素现在将图案图像缩放到大约其大小的一半，并以深灰色背景颜色重复。下图显示了这个 background 样式在浏览器中是如何呈现的：

在本节中，您使用了 background 属性，它是结合了本教程中使用的所有属性的简写属性。在下一节中，您将尝试使用 linear-gradient() 函数的 CSS 渐变。

使用 `linear-gradient` 函数创建渐变

您可以为 background-image 属性提供 url() 图像文件以外的值；它还可以创建渐变。 CSS目前有linear-gradient()、radial-gradient()、conic-gradient()三种不同的渐变函数。在本节中，您将使用 linear-gradient() 函数在两种颜色之间创建线性渐变，以及具有多种颜色和定义角度的更复杂的渐变。

从设计的角度来看，渐变可以有很多用途。它们提供了一种比纯色更有活力的视觉美感，但不像照片那么复杂。渐变也可以与不透明度一起使用，以使照片更加柔和，从而提高任何叠加文本的易读性。

首先，在您的文本编辑器中打开 index.html 并在网格中添加一个新项目，其类别为 style-16 和 <h2> 和 Linear Gradient。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-16"></div>
    <div class="item-info">
      <h2>Linear Gradient</h2>
    </div>
  </div>
</div>
...

将更改保存到 index.html 并在文本编辑器中打开 styles.css。接下来，创建一个 background-image 属性。对于该值，添加 linear-gradient() 函数。在函数的括号内，首先添加一个方向，该方向可以使用 to right 的字值。这个字值告诉浏览器从左到右绘制渐变。接下来，添加一个逗号，后跟命名颜色 deeppink。之后，添加另一个逗号和命名颜色 orange，如以下代码块中突出显示的：

样式.css

...
.style-15 {
  ...
}

.style-16 {
  background-image: linear-gradient(to right, deeppink, orange);
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。浏览器会在左侧绘制一个带有 deeppink 的渐变，并在右侧将颜色转换为 orange，如下图所示：

所有渐变都允许多个颜色值和停止点，可以是固定值或百分比。首先，在您的文本编辑器中返回 index.html 并在网格中添加另一个项目，其类别为 style-17 和 <h2> 和 Linear Gradient with Stops。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-17"></div>
    <div class="item-info">
      <h2>Linear Gradient with Stops</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。添加具有 linear-gradient() 值的 background-image 属性。在函数的括号内，添加方向 175deg。 linear-gradient() 函数除了接受单词方向外，还接受数值度数。第一种颜色是 navy，但在为下一种颜色添加逗号之前，请添加一个空格并将此颜色在渐变上的位置设置为 0%。接下来，添加逗号，然后在 35% 处添加颜色 dodgerblue，然后是逗号。对 skyblue 50% 继续此过程，然后是 gold 50%，这会在两种颜色之间设置一条硬线。然后用 orange 51% 和 saddlebrown 100% 完成渐变，如以下代码块中突出显示的 CSS 所示：

样式.css

...
.style-16 {
  ...
}

.style-17 {
  background-image: linear-gradient(175deg, navy 0%, dodgerblue 35%, skyblue 50%, gold 50%, orange 51%, saddlebrown 100%);
}

将这些更改保存到 styles.css，然后在 Web 浏览器中刷新页面。这种颜色和停止点的渐变会产生复杂的渐变，看起来可能类似于沙漠地平线图像。下图显示了此渐变在浏览器中的渲染：

在本节中，您使用了 linear-gradient() CSS 函数来创建两种颜色的渐变和由多种颜色和停止点组成的更复杂的渐变。在最后一节中，您将在一个元素上创建多个背景。

使用多背景方法将图像与渐变混合

在最后一部分中，您将结合在本教程中使用的所有内容，将多个背景应用于单个预览元素。多个背景可以帮助创建视觉上复杂的样式，同时使用最少量的 HTML 元素。

首先，在您的文本编辑器中打开 index.html 并将最后一项添加到网格中，其中包含 style-18 类和带有 Multiple Backgrounds 的 <h2>。以下代码块中突出显示的 HTML 显示了它在文件中的显示方式：

索引.html

...
<div class="grid">
  ...
  <div class="item">
    <div class="preview style-18"></div>
    <div class="item-info">
      <h2>Multiple Backgrounds</h2>
    </div>
  </div>
</div>
...

接下来，将更改保存到 index.html 并在文本编辑器中打开 styles.css。创建一个 .style-18 类选择器并添加一个 background 属性。由于多个背景可能会变长，因此将属性值与属性名称分开放在单独的行上会很有帮助。对于第一部分，再次加载蜂鸟图像 photo.jpg。然后添加 center / cover no-repeat，它将图像以元素居中并缩放图像以填充空间，同时不重复图像。以下代码块中突出显示的 CSS 演示了如何在文本编辑器中编写它：

样式.css

...
.style-17 {
  ...
}

.style-18 {
  background:
      url("./images/photo.jpg") center / cover no-repeat
  ;
}

将这些更改保存到 styles.css，然后返回 Web 浏览器并刷新页面。蜂鸟图像将在元素中居中并缩放以适应，如下图所示：

多个背景图像在浏览器读取时分层。要在蜂鸟的图像上方添加渐变，渐变需要位于 background 值中的图像之前。多个背景的每一层用逗号分隔，允许多组 background 简写值。

为了添加覆盖蜂鸟图像的渐变，返回到您的 styles.css 文件和 .style-18 选择器。在 background 属性和 url("./images/photo.jpg") center / cover no-repeat 之间添加新行。然后，在括号中添加一个字方向为to top left的linear-gradient()。添加一个逗号，后跟 dodgerblue 10%，然后是 transparent 80%。最后，在 linear-gradient() 的右括号后添加另一个逗号以将其区分为多重背景，如以下突出显示的代码所示：

样式.css

...
.style-18 {
  background:
    linear-gradient(to top left, dodgerblue 10%, transparent 80%),
    url("./images/photo.jpg") center / cover no-repeat
  ;
}

保存对 styles.css 的更改，然后在 Web 浏览器中刷新 index.html。渐变覆盖蜂鸟图像，从右下角的全蓝色渐变到左上角的透明，如下图所示：

接下来，您将在预览元素的左侧再添加一个重复图像的背景叠加层。

在文本编辑器中返回 styles.css 并在 background: 属性之后添加新行。使用url()函数从images目录加载pattern-y.png。之后，将背景的位置设置为 center left 并添加正斜杠以将背景图像的大小设置为 64px。最后，将背景设置为 repeat-y，使其垂直重复并以逗号结束背景设置。以下代码块中突出显示的 CSS 演示了它是如何编写的：

样式.css

...
.style-18 {
  background:
    url("./images/pattern-y.png") center left / 64px repeat-y,
    linear-gradient(to top left, dodgerblue 10%, transparent 80%),
    url("./images/photo.jpg") center / cover no-repeat
  ;
}

保存对 styles.css 的更改，然后返回 Web 浏览器并刷新 index.html。新的顶层背景是元素左侧的粉色和橙色圆点图案。该图案同时覆盖了渐变和蜂鸟图像，如下图所示：

在本节中，您使用了在前几节中开发的技能将多个背景应用于单个元素。多背景是创建复杂样式的有用工具，无需额外的 HTML 开销。这种没有多个背景的相同效果需要至少三个带有几个附加样式属性的 HTML 元素，以使元素彼此层叠并具有相同的尺寸。

结论

在本教程中，您通过了许多属性的示例来控制如何在 HTML 元素上呈现背景。您应用了纯色、加载了图像资源并创建了渐变。您调整了图像在元素上的平铺和重复方式，并调整了背景图像的大小以适应不同的空间。您还将所有这些属性组合到 background 速记中并组合了多个背景。在本教程中，您创建了一个资源，您可以一次又一次地参考如何使用和组合这些许多背景属性来创建新的东西。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何使用CSS将背景样式应用于HTML元素

介绍

先决条件

设置初始 HTML 和 CSS

在元素上使用 background-color 和 background-image

使用 background-repeat 属性平铺图像

使用 background-position 调整背景图像的位置

使用 background-size 属性调整背景图像的大小

使用 background-attachment 属性附加背景图像

将属性组合到 background 属性中

使用 linear-gradient 函数创建渐变

使用多背景方法将图像与渐变混合

结论

在元素上使用 `background-color` 和 `background-image`

使用 `background-repeat` 属性平铺图像

使用 `background-position` 调整背景图像的位置

使用 `background-size` 属性调整背景图像的大小

使用 `background-attachment` 属性附加背景图像

将属性组合到 `background` 属性中

使用 `linear-gradient` 函数创建渐变