作者选择了Diversity in Tech Fund作为Write for DOnations计划的一部分接受捐赠。
简介
在创建网站时，背景样式对设计的视觉美感起着重要作用。无论是创建一个按钮还是一个大型交互区域，背景样式都能提供清晰的定义，并能区分特定用途的区域。了解 CSS 中的背景系列属性可以实现哪些功能，将有助于你创建更高效的代码和视觉上更有趣的设计。
在本教程中，您将创建一个元素网格，每个网格都展示了为元素应用背景的不同方法。通过创建一系列分组示例，你将获得一个参考工具，并在此尝试不同的背景属性。您将创建一张包含 18 种背景颜色、图像和渐变变化的表格。每种变化都将使用与背景相关的属性来实现特定的效果。最后一个变体将在一个元素上结合多种方法，创建多重背景效果。
由 3 列 6 行组成的背景图像演示网格](assets/67917/1.jpg)
先决条件
- 了解 CSS 的级联和特定性功能，可通过阅读 如何使用级联和特定性将 CSS 样式应用于 HTML。
- 掌握类型选择器、组合选择器和选择器组的知识，可参阅 如何使用 CSS 选择 HTML 元素样式。
- 熟悉颜色值，可参阅 如何使用 CSS 中的颜色值。
- 在本地计算机上保存一个空的 HTML 文件，文件名为 "index.html"，你可以通过文本编辑器和浏览器访问该文件。要开始学习，请查看我们的 如何设置 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 了解如何在浏览器中查看 HTML。如果你是 HTML 的新手，可以试试整个 如何使用 HTML 创建网站 系列。
设置初始 HTML 和 CSS
要开始使用背景样式，首先要设置 HTML 和 CSS 代码，这些代码将在本教程的其余部分中使用。在本节中，您将编写所有必要的 HTML 代码和一些初始 CSS 样式，以处理布局并为视觉美感奠定基础。
首先在文本编辑器中打开 index.html。然后，在文件中添加以下 HTML 代码：
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 </head>
6 <body>
7 </body>
8</html>
接下来，转到 <head> 标签，添加一个 <meta> 标签来定义 HTML 文件的字符集。设置页面标题，添加一个<meta>标记，定义移动设备应如何呈现页面，最后用<link>标记加载稍后制作的 CSS 文件。
下面的代码块突出显示了这些新增内容。随着代码的添加和更改，您将在整个教程中遇到这种高亮显示方法：
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Background Styles Resource</title>
8 <link rel="stylesheet" href="styles.css">
9 </head>
10 <body>
11 </body>
12</html>
添加完 <head> 内容后，移动到 <body> 元素，在此添加标题和网格的基础 <div>。将此代码块中突出显示的部分添加到文本编辑器中的 index.html 文件中：
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Background Styles Resource</title>
8 <link rel="stylesheet" href="styles.css" />
9 </head>
10 <body>
11 <h1>Background Styles Resource</h1>
12 <div class="grid">
13 </div>
14 </body>
15</html>
<h1>提供了描述页面内容的标题。带有 grid``class 属性的 <div> 元素将包含本教程中添加的所有其余 HTML 内容。
保存对 index.html 的更改，并在文本编辑器中打开。然后，在浏览器中打开 index.html。在教程中，您将在文本编辑器和浏览器之间来回切换，以验证对代码所做的更改。
接下来，返回文本编辑器，创建一个名为 styles.css 的文件。这是你在 index.html 中的 <head> 元素中引用的文件。在 styles.css 文件中，添加以下代码：
1[label styles.css]
2body {
3 font-family: system-ui, sans-serif;
4 color: #333;
5}
6
7h1 {
8 text-align: center;
9}
body "元素选择器将页面字体从默认衬线字体改为操作系统字体（如果支持)，然后再恢复为无衬线字体。h1 "选择器使页面上的文本居中。
接下来，您将在 .grid 类选择器中添加 CSS Grid，这是一个综合布局属性集合。以下代码块中突出显示的 CSS 表示将添加到 styles.css 中的内容：
1[label styles.css]
2...
3h1 {
4 text-align: center;
5}
6
7.grid {
8 width: 90%;
9 max-width: 80rem;
10 margin: 2rem auto;
11 display: grid;
12 grid-template-columns: repeat(3, minmax(100px, 1fr));
13 grid-gap: 1.5rem;
14}
该选择器上的属性将设置一个灵活的 width 和 max-width 带，这样你就可以调整页面大小，使宽度与之相适应。它还将设置一个 margin 属性，用于设置网格上下的空间。然后应用定义网格所需的属性。
display "属性使元素使用 CSS 网格，其值为 "grid"。设置完成后，其他两个属性 grid-template-columns 和 grid-gap 将影响稍后添加的 .grid 元素的内容。grid-template-columns "说明将有 "3 "列，它们的最小宽度必须是 "100px"，最大宽度必须是整个宽度的 "1fr"（分数)。由于有三列，该分数将是 33.333%。最后，"grid-gap "定义了网格的每一行和每一列之间有 "1.5rem "的间距。
接下来，您将为在后面章节中编写的 HTML 添加两个类选择器。添加一个.item类选择器，它将应用于每个变体的网格项。然后，添加一个 .preview 类选择器，它将包含背景样式演示。下面代码块中突出显示的 CSS 演示了如何设置：
1[label styles.css]
2...
3.grid {
4 ...
5}
6
7.item {
8 border: 1px solid #999;
9 background-color: white;
10}
11
12.preview {
13 height: 16rem;
14 border-bottom: 1px solid #999;
15}
现在，您已经为 index.html 和 styles.css 文件设置了起点。继续之前，请务必保存对这两个文件的更改。
本教程最后一部分的设置，是在 "index.html "和 "styles.css "文件旁边新建一个名为 "images "的目录（或文件夹)。下载以下每张图片，并将它们添加到新创建的 images 目录中：
- 可重复图案：保存为
pattern.png。 - X 轴可重复图案：另存为
pattern-x.png。 - Y 轴可重复图案：另存为
pattern-y.png。 - 蜂鸟照片](https://assets.digitalocean.com/articles/67917/5.jpg)：保存为
photo.jpg。(Photo by Mark Olsen on Unsplash)
在本节中，您准备了 HTML 和 CSS，它们将在本教程的其余部分为您的代码提供支持。您还下载了演示图片，并将它们添加到images目录中，与index.html和styles.css文件放在一起。在下一节中，您将设置 background-color 和 background-image 。
在元素上使用 background-color 和 `background-image
您可以为 HTML 元素填充两种背景之一：颜色或图像。CSS 生成的渐变是图像的一种，将在本教程稍后部分介绍。在本节中，你将为元素应用彩色背景，然后加载图像文件作为元素的背景。
首先在文本编辑器中打开 index.html，然后在 <div class="grid"> 元素内添加以下代码块中突出显示的 HTML：
1[label index.html]
2...
3<div class="grid">
4 <div class="item">
5 <div class="preview style-01"></div>
6 <div class="item-info">
7 <h2>Background Color</h2>
8 </div>
9 </div>
10</div>
11...
在整个教程中，您创建的每个变体都将使用这种 HTML 格式。不同变体之间会发生变化的是 class 属性值，它将增加每个变体的编号。<h2>元素将为该变体设置相应的标题。
保存对 index.html 的更改，然后在文本编辑器中打开 styles.css。
在 .preview 类选择器后，添加名为 .style-01 的新类选择器。然后，在新的选择器块中，添加一个命名值为 deeppink 的 background-color 属性。下面代码块中高亮显示的 CSS 展示了这一效果：
1[label styles.css]
2...
3.preview {
4 height: 16rem;
5}
6
7.style-01 {
8 background-color: deeppink;
9}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。现在，您将在第一个变体中看到粉红色图像，如下图所示：
background-color 属性将接受任何有效的 CSS 颜色，包括具有 alpha 通道的颜色，如 RGBA 和 HSLA。您可以使用 alpha 通道为背景色提供透明度。
接下来，返回 index.html，添加一个新的变化，这次将类递增为 style-02。同时将 <h2> 元素的文本设置为 背景图像。以下代码块中高亮显示的 HTML 将演示如何在文件中显示：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-02"></div>
7 <div class="item-info">
8 <h2>Background Image</h2>
9 </div>
10 </div>
11</div>
12...
将更改保存到 index.html，然后在文本编辑器中打开 styles.css。添加一个 .style-02 类选择器，然后添加一个 background-image 属性。要加载 photo.jpg 文件作为背景，首先创建一个 url() 函数作为值。然后，在 url() 函数的括号内添加文件路径，如下代码块中突出显示的 CSS 所示：
1[label styles.css]
2...
3.style-01 {
4 ...
5}
6
7.style-02 {
8 background-image: url("./images/photo.jpg");
9}
将更改保存到 styles.css，然后在浏览器中刷新 index.html。预览区域只会显示 photo.jpg 图像的一部分，因为图像的尺寸大于预览区域的尺寸。默认情况下，背景图片是以原始像素尺寸显示的，因此图像并不完全可见。下图展示了浏览器中的显示效果：
蜂鸟照片的失焦部分](assets/67917/7.jpg)
在本节中，您将设置前两个背景变化。第一个使用了 background-color 属性，第二个使用了 background-image 属性。接下来，您将创建四种变化，使用不同的 background-repeat 属性值。
使用 background-repeat 属性平铺图像
既然可以将背景图片加载到元素上，那么现在就可以使用不同的方法将图像与重复图案图像平铺在一起。默认情况下，"背景图片 "会沿着 x 轴和 y 轴以平铺图案的形式重复，但您可以控制这种重复，使其只沿着单个轴重复，或者完全不重复。在本节中，您将使用 background-repeat 属性控制四种不同的重复情况。
首先，在文本编辑器中打开 index.html，然后在网格中添加一个新项目，其类别为 style-03，<h2> 的背景重复。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-03"></div>
7 <div class="item-info">
8 <h2>Background Repeat</h2>
9 </div>
10 </div>
11</div>
12...
接下来，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。为 .style-03 创建一个类选择器。在选择器块中，添加一个带有 url() 函数的 background-image ，该函数可从 images 文件夹中加载 pattern.png 图像，如下代码块所示：
1[label styles.css]
2...
3.style-02 {
4 ...
5}
6
7.style-03 {
8 background-image: url("./images/pattern.png");
9}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。pattern.png "图像将被设置为一个可重复的磁贴，看起来就像一个填满整个元素的无休止的图像。该元素的样式将显示在浏览器中，如下图所示：
值得注意的是，该图像从左上角开始重复，并不断向右下角扩展。这是任何 background-image 的默认状态，它可以创建像这样的无缝图案，也可以创建更严格的重复。创建此默认状态的属性是设置为 repeat 值的 background-repeat。
使用 background-repeat 属性，您还可以创建一个从左到右重复的无缝图案。使用这种重复可以产生各种效果，例如在容器顶部形成锯齿状，就像撕裂的穿孔边缘。您还可以用它在底部制作一个从头到尾横跨的风格化双线图形。通过将 background-repeat 属性设置为 repeat-x ，您可以告诉浏览器仅沿 x 轴重复背景。
要开始沿 x 轴工作，请返回文本编辑器中的 index.html。然后，在网格中添加一个新的 HTML 块，其类别为style-04，<h2>的内容为背景重复 X。下面代码块中高亮显示的 HTML 演示了如何在文件中显示：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-04"></div>
7 <div class="item-info">
8 <h2>Background Repeat X</h2>
9 </div>
10 </div>
11</div>
12...
保存对 index.html 的更改，然后在文本编辑器中打开 styles.css。创建一个.style-04类选择器，其中的background-image属性将加载images目录中的pattern-x.png文件。该图片将沿元素顶部的 x 轴重复显示。接下来，添加一个 background-repeat 属性，并将其值设置为 repeat-x ，如下代码块所示：
1[label styles.css]
2...
3.style-03 {
4 ...
5}
6
7.style-04 {
8 background-image: url("./images/pattern-x.png");
9 background-repeat: repeat-x;
10}
将更改保存到 styles.css，然后返回网页浏览器并刷新 index.html。默认情况下，重复背景图片从元素的左上角开始。因此，图案将沿着预览元素区域的顶部从左到右重复，如下图所示：
正如背景可以设置为从左到右重复一样，它也可以设置为从上到下重复。您可以将 "背景重复 "属性设置为 "重复-y"，这样就可以沿 Y 轴在一列中重复图像。这对于沿容器左侧或右侧边缘创建视觉效果非常有用。
要开始使用 Y 轴，请在文本编辑器中打开 index.html，然后在网格中添加一个新项目，其类别为 style-05，<h2> 的背景重复 Y。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-05"></div>
7 <div class="item-info">
8 <h2>Background Repeat Y</h2>
9 </div>
10 </div>
11</div>
12...
然后，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。与 x 轴示例一样，为 .style-05 创建一个类选择器，并添加一个 background-image 属性。这次，将 background-image 值设置为指向 pattern-y.png 图像。然后，添加 background-repeat 属性，并将其值设置为 repeat-y （如下代码块所示)：
1[label styles.css]
2...
3.style-04 {
4 ...
5}
6
7.style-05 {
8 background-image: url("./images/pattern-y.png");
9 background-repeat: repeat-y;
10}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。如下图所示，图案将沿着预览元素的左边缘向下重复：
通常情况下，完全不重复背景图片是非常有用的。这可能发生在添加可视图形作为背景而不是 HTML <img />的情况下，例如有时添加徽标或图标。通过将 background-repeat 属性设置为 no-repeat 值，可以完全禁用重复。
首先，在文本编辑器中返回 index.html，然后在网格中添加另一个项目，其类别为 style-06，并添加一个 <h2> 元素，其内容为 背景不重复。以下代码块中高亮显示的 HTML 将显示在您的文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-06"></div>
7 <div class="item-info">
8 <h2>Background No Repeat</h2>
9 </div>
10 </div>
11</div>
12...
保存对 index.html 的更改，然后在文本编辑器中打开 styles.css。添加 .style-06 类选择器，并与本节的第一个变体一样，创建一个 background-image 属性，加载 pattern.png 文件作为背景图片。接着，添加一个 background-repeat 属性，其值设为 no-repeat。图像将只显示一次，而不是连续的平铺重复。下面代码块中突出显示的 CSS 演示了这将如何显示在styles.css文件中：
1[label styles.css]
2...
3.style-05 {
4 ...
5}
6
7.style-06 {
8 background-image: url("./images/pattern.png");
9 background-repeat: no-repeat;
10}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。现在，预览元素的左上角将出现一个 pattern.png 图像实例，如下图所示：
在本节中，你使用了 background-repeat 属性的默认值 repeat。您还使用 repeat-x 值水平重复了平铺图像，使用 repeat-y 值垂直重复了平铺图像。最后，你还使用了 no-repeat 值来防止图像重复。在下一节中，您将使用 background-position 属性设置背景图片在元素上的锚定位置。
使用 background-position 调整背景图片的位置
在使用 background-image 时，重要的是要知道，默认情况下图像会被放置在元素的左上角。但是，这可能并不是你想在元素中设置背景图像的位置，尤其是在图像不重复的情况下。在本节中，您将使用 background-position 属性来更改图像的初始实例在元素中的锚定位置。
要开始使用 "背景-位置"，请在文本编辑器中打开 "index.html"，然后在网格中添加一个新项目，其类别为 "style-07"，"
"的 "背景位置"。以下代码块中高亮显示的 HTML 将显示在您的文件中： 1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-07"></div>
7 <div class="item-info">
8 <h2>Background Position</h2>
9 </div>
10 </div>
11</div>
12...
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-07"></div>
7 <div class="item-info">
8 <h2>Background Position</h2>
9 </div>
10 </div>
11</div>
12...
然后，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。
为 .stlye-07 创建一个类选择器。对于本节中的每个 CSS 块，为background-image加载pattern.png文件，并将background-repeat属性设置为no-repeat，以便定位更加清晰。最后，添加 "background-position "属性，并使用 "bottom right "的命名值将图像锚定到与默认值相邻的角落。下面代码块中高亮显示的 CSS 演示了如何编写：
1[label styles.css]
2...
3.style-06 {
4 ...
5}
6
7.style-07 {
8 background-image: url("./images/pattern.png");
9 background-repeat: no-repeat;
10 background-position: bottom right;
11}
保存对 styles.css 的更改，然后返回浏览器并刷新 index.html。现在，在预览元素的右下角会显示一个 pattern.png 文件实例，如下图所示：
背景位置 "属性可以接受两个命名值，每个轴一个。对于 x 轴，这些值是 left、center 和 right。对于 y 轴，这些值是 top、center 和 bottom。两个坐标轴上都有名为 center 的值，结合使用可将背景图像定位在元素的绝对中间位置。
要使背景图像居中，首先要在文本编辑器中打开 index.html，然后在网格中添加一个新项目，其类别为 style-08，并在 <h2> 元素中添加 背景位置居中。以下代码块中高亮显示的 HTML 将显示在您的文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-08"></div>
7 <div class="item-info">
8 <h2>Background Position Center</h2>
9 </div>
10 </div>
11</div>
12...
接下来，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。创建一个.style-08类选择器，并添加载入pattern.png的background-image属性，同时将background-repeat属性设置为no-repeat，与上一个变体一样。您可以将 background-position 属性设置为一个命名为 center 的值，这样浏览器就会理解为 x 轴和 y 轴位置都使用这个名称。下面代码块中高亮显示的 CSS 演示了如何设置：
1[label styles.css]
2...
3.style-07 {
4 ...
5}
6
7.style-08 {
8 background-image: url("./images/pattern.png");
9 background-repeat: no-repeat;
10 background-position: center;
11}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。如下图所示，"pattern.png "的单个实例现在浮动在预览元素的中心：
您还可以使用数值和命名值来定义 "背景图片 "的起始位置。当您想将背景图片从元素边缘偏移一个设定值或相对值时，这将非常有用。
首先，返回文本编辑器中的 index.html，然后在网格中添加另一个项目，其类别为 style-09，<h2> 元素为 背景位置数字。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-09"></div>
7 <div class="item-info">
8 <h2>Background Position Numeric</h2>
9 </div>
10 </div>
11</div>
12...
将更改保存到 index.html，然后在文本编辑器中打开 styles.css。然后，创建一个 .style-09 类选择器，其中包含一个加载 pattern.png 文件的 background-image 属性和一个具有 no-repeat 值的 background-repeat 属性。然后，添加一个 background-position 属性，其值为 right 10% bottom 40px，如下代码块所示：
1[label styles.css]
2...
3.style-08 {
4 ...
5}
6
7.style-09 {
8 background-image: url("./images/pattern.png");
9 background-repeat: no-repeat;
10 background-position: right 10% bottom 40px;
11}
background-position 属性中的 right 10% 部分将把 background-image 固定在元素宽度的右侧 10% 处。然后，bottom 40px 将把background-image设置为距离元素底部 40px 的位置。
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。现在，图案图像将位于元素的右下方，但与边缘有一定的间距，如下图所示：
在本节中，您将使用 background-position 属性将背景图像锚定到不同的位置，锚定时要使用字值（如 bottom和center)以及与字值相结合的数值。在下一节中，您将使用 background-size 属性调整元素内背景图像的大小。
使用 background-size 属性调整背景图片大小
作为背景加载到元素上的图像是以其完整像素尺寸放置的。例如，如果用于背景的图像文件的像素尺寸为 800⨉600，但应用于它的元素的像素尺寸为 400⨉300，那么背景图像的 25% 将可见。在本节中，您将使用 background-size 属性来调整 background-image 文件的大小。
要开始调整 "背景图片 "的大小，请在文本编辑器中打开 "index.html"。然后，在网格中添加一个新项目，其类别为 style-10，<h2> 的内容为背景尺寸包含。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-10"></div>
7 <div class="item-info">
8 <h2>Background Size Contain</h2>
9 </div>
10 </div>
11</div>
12...
然后，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。
为 .style-10 创建一个类选择器。在选择器块中，加载蜂鸟的photo.jpg图片作为background-image。然后，将 background-repeat 属性设置为 no-repeat，并将 background-position 设置为 center，这样图片就只能在元素中心重复一次。最后，添加一个 background-size 属性，并使用命名值 contain （如下代码块所示)：
1[label styles.css]
2...
3.style-09 {
4 ...
5}
6
7.style-10 {
8 background-image: url("./images/photo.jpg");
9 background-repeat: no-repeat;
10 background-position: center;
11 background-size: contain;
12}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。现在，图像将被缩小到完全包含在元素中，这就是命名为 contain 的 background-size 值的含义。蜂鸟的图像现在完全可见，而不使用 background-size 时只能显示一小部分。下图演示了在浏览器中的显示效果：
一只安娜蜂鸟将喙插入花朵中。整个图像包含在元素中。](assets/67917/15.jpg)
接下来，您将调整 background-size 值的大小，使其完全覆盖元素的背景空间。首先，在文本编辑器中打开 index.html，然后在网格中添加另一个项目，其类别为 style-11，并在 <h2> 元素中添加 背景尺寸覆盖。以下代码块中高亮显示的 HTML 将显示在您的文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-11"></div>
7 <div class="item-info">
8 <h2>Background Size Cover</h2>
9 </div>
10 </div>
11</div>
12...
保存对 index.html 的更改，然后在文本编辑器中打开 styles.css。然后，创建一个 .style-11 类选择器，并从 .style-10 选择器块中复制相同的 background-image, background-repeat 和 background-position 属性。然后，使用命名值 cover 添加一个 background-size 属性。下面代码块中高亮显示的 CSS 演示了如何在文本编辑器中编写：
1[label styles.css]
2...
3.style-10 {
4 ...
5}
6
7.style-11 {
8 background-image: url("./images/photo.jpg");
9 background-repeat: no-repeat;
10 background-position: center;
11 background-size: cover;
12}
将更改保存到 styles.css，然后返回网络浏览器并刷新 index.html。
现在，"背景图片 "将填充整个元素，但会按比例缩小以适应。覆盖 "值将根据元素的方向调整 "背景图片 "的大小。如果元素的方向是_landscape_，即宽度大于高度，那么 background-image 的大小将被调整，使宽度与元素的宽度相同。在这种情况下，会导致 background-image 的高度比元素高，因此会被元素的边界截断。下图演示了 background-size 为 cover 的 background-image 在浏览器中的显示效果：
一只安娜蜂鸟将喙插入花朵中。图片充满整个元素，顶部和底部的部分内容被截去](assets/67917/16.jpg)
最后，background-size 值也可以接受数值。要使用数值，请返回文本编辑器中的 index.html。然后，在网格中添加一个新项目，其类别为 style-12，<h2> 元素为 Background Size Numeric。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-12"></div>
7 <div class="item-info">
8 <h2>Background Size Numeric</h2>
9 </div>
10 </div>
11</div>
12...
然后，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。创建一个 .style-12 类选择器。再次复制 .style-10和.style-11中使用的background-image、background-repeat和background-position属性，并将它们添加到.style-12的选择器块中。
然后，添加background-size属性，数值为30%。如果将 background-size 属性设置为单个数值，它将对图像的高度和宽度应用相同的值。要保持图像的宽高比，可在30%后添加auto，这样就会将图像的宽度设置为 30%，并按比例设置高度。高亮显示的 CSS 表明，.style-12 选择器块和属性将如何显示在文本编辑器中：
1[label styles.css]
2...
3.style-11 {
4 ...
5}
6
7.style-12 {
8 background-image: url("./images/photo.jpg");
9 background-repeat: no-repeat;
10 background-position: center;
11 background-size: 30% auto;
12}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。现在，蜂鸟图像在元素中心的比例缩放为宽度的 30%，如下图所示：
一只安娜蜂鸟将喙插入花朵中。图像位于元素中心](assets/67917/17.jpg)
在本节中，您使用了 backround-size 属性来调整背景图片的大小，使其在带有 contain 值的元素中完全可见。你使用了 cover 属性来调整背景图片的大小，以便在覆盖整个元素的同时显示尽可能多的图片。最后，您使用数值将背景图片缩放至设定大小，并使用 auto 值保持缩放比例。在下一节中，您将使用 background-attachment 属性来防止背景图片随元素滚动。
使用 background-attachment 属性粘贴背景图片
background-attachement "属性使 "背景图片 "静止不动。这将产生一种效果，即内容在图像上滑动，就好像图像浮在上面一样。在本节中，您将使用 background-attachment 属性创建这种效果。
首先，在文本编辑器中打开 index.html，然后在网格中添加一个新项目，其类别为style-13，<h2>为背景附件。以下代码块中高亮显示的 HTML 将显示在您的文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-13"></div>
7 <div class="item-info">
8 <h2>Background Attachment</h2>
9 </div>
10 </div>
11</div>
12...
然后，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。
创建一个 .style-13 类选择器。在选择器块中，添加一个 background-image 属性，该属性将从您的 images 目录中加载 pattern.png 文件。使用该图片的默认值，使图片重复填充整个元素。最后，添加命名值为 fixed 的 background-attachment 属性，如下代码块所示：
1[label styles.css]
2...
3.style-12 {
4 ...
5}
6
7.style-13 {
8 background-image: url("./images/pattern.png");
9 background-attachment: fixed;
10}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。当你向下滚动页面时，这种变化的预览区域可能看起来更像是一个窗口，可以看到背后的背景。使用此属性时需要注意的是，图像是固定在浏览器视口中的，而不是固定在元素上。这会影响 "背景-位置"，因为它会改变决定位置的原点。下面的动画演示了浏览器中的这种效果：
在本节中，我们使用了带有 fixed 值的 background-attachment 属性，以防止背景图片随元素滚动。在下一节中，你将把前面的所有属性合并为 background 简写属性。
将属性组合到 background 属性中
到此为止，所有的 CSS 属性都可以合并为单一的 "背景 "速记属性。在本节中，你将使用该速记属性创建两个变体，以了解 "background-size "值的正常用法和应用时的特殊注意事项。
<$>[注］
注意： 请记住，使用 background 速记可以覆盖某些属性值，即使没有明确声明。例如，background将覆盖background-image值，即使速记值中没有提供图像。
<$>
要开始使用速记功能，请在文本编辑器中打开 index.html，然后在网格中添加一个新项目，其类别为 style-14 和 <h2> 带有背景速记。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-14"></div>
7 <div class="item-info">
8 <h2>Background Shorthand</h2>
9 </div>
10 </div>
11</div>
12...
接下来，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。创建一个 .style-14 类选择器，并在选择器块中添加 background 速记属性。为其值添加一个 url() 函数，从images目录中加载pattern.png。在该函数后添加一个空格，并添加名为 center 的值，该值将应用background-position值。接下来，再添加一个空格，并添加命名值 repeat-x。最后，添加名为 gold 的颜色值，并以分号结束该行，如下代码块所示：
1[label styles.css]
2...
3.style-13 {
4 ...
5}
6
7.style-14 {
8 background: url("./images/pattern.png") center repeat-x gold;
9}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。pattern.png "图像已加载，由于使用了 "center "和 "repeat-x "值，它只能在预览元素的垂直中心从左到右重复显示。此外，如下图所示，预览元素被填充为纯金色：
对于 "背景 "速记，数值可以按任何顺序排列。图像不必在前，颜色也不必在后。但是，当在速记中应用 background-size 时，这条规则有一个例外。在这种情况下，"background-size "值必须位于 "background-position "值之后，并且不能用空格分隔，而必须用斜线符号 (/)分隔。
返回文本编辑器中的 index.html 文件。然后，在网格中添加一个新项目，其类别为 "style-15"，"
"为 "带大小的背景速记"。以下代码块中高亮显示的 HTML 将显示在文件中： 1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-15"></div>
7 <div class="item-info">
8 <h2>Background Shorthand with Size</h2>
9 </div>
10 </div>
11</div>
12...
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-15"></div>
7 <div class="item-info">
8 <h2>Background Shorthand with Size</h2>
9 </div>
10 </div>
11</div>
12...
保存对 index.html 的更改，然后在文本编辑器中打开 styles.css。然后，添加一个带有background速记属性的.style-15类选择器。为图片使用相同的 url('./images/pattern.png) 。然后将位置值设置为 center，接着是一个空格，然后是一个正斜线 (/)。在正斜线后再加一个空格，然后将 64px 作为 background-size 的值。由于 background-size 值使用的是单一值，因此背景图片的高度和宽度都将设置为 64px。最后，添加一个空格和表示深灰色的十六进制速记值：# 222.突出显示的 CSS 显示了这将如何出现在你的 styles.css 文件中：
1[label styles.css]
2...
3.style-14 {
4 ...
5}
6
7.style-15 {
8 background: url("./images/pattern.png") center / 64px #222;
9}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。现在，该变体的预览元素中的图案图像将缩放至其大小的一半左右，并重复使用深灰色背景色。下图显示了这种 "背景 "样式在浏览器中的呈现方式：
在本节中，你使用了 "background "属性，它是本教程中所有属性的简写。在下一节中，你将使用 "linear-gradient() "函数尝试 CSS 梯度。
使用 "线性梯度 "函数创建梯度
您可以为 background-image 属性提供除 url() 图像文件以外的其他值；它还可以创建渐变。CSS 目前有三种不同的渐变函数：linear-gradient()、radial-gradient() 和 conic-gradient()。在本节中，您将使用 linear-gradient() 函数在两种颜色之间创建线性渐变，以及使用多种颜色和定义角度创建更复杂的渐变。
从设计的角度来看，渐变有很多用途。与纯色相比，渐变提供了一种更具活力的视觉美感，但又不像照片那样复杂。渐变还可以与不透明度一起使用，使照片更加柔和，从而提高叠加文字的可读性。
首先，在文本编辑器中打开 index.html，然后在网格中添加一个新项目，其类别为style-16，<h2>为线性渐变。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-16"></div>
7 <div class="item-info">
8 <h2>Linear Gradient</h2>
9 </div>
10 </div>
11</div>
12...
保存对 index.html 的更改，然后在文本编辑器中打开 styles.css。然后，创建一个 background-image 属性。为其值添加 linear-gradient() 函数。在函数的括号内，首先添加一个方向，可以使用向右的字值。这个字值告诉浏览器从左到右绘制渐变。接着，添加一个逗号，然后是命名的颜色 "deeppink"。之后，再添加一个逗号和命名颜色 orange，如下代码块所示：
1[label styles.css]
2...
3.style-15 {
4 ...
5}
6
7.style-16 {
8 background-image: linear-gradient(to right, deeppink, orange);
9}
将更改保存到 styles.css，然后返回网页浏览器并刷新 index.html。浏览器将绘制一个渐变色，左边为deeppink，右边过渡到orange，如下图所示：
从左边的粉红色到右边的橙色的颜色渐变](assets/67917/21.png)
所有渐变都允许多个颜色值和停止点，停止点可以是固定值或百分比。首先，在文本编辑器中返回 index.html，然后在网格中添加另一个项目，其类别为 style-17，并在 <h2> 中添加 "带停止点的线性渐变"。以下代码块中高亮显示的 HTML 将显示在您的文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-17"></div>
7 <div class="item-info">
8 <h2>Linear Gradient with Stops</h2>
9 </div>
10 </div>
11</div>
12...
然后，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。添加一个具有 linear-gradient() 值的 background-image 属性。在函数的括号内，添加方向 175deg。除文字方向外，linear-gradient() 函数还接受数字度值。第一种颜色是 "navy"，但在为下一种颜色添加逗号之前，先添加一个空格，并将这种颜色在梯度上的位置设置为 "0%"。接着，添加逗号，然后在 35% 处添加颜色 dodgerblue 并添加逗号。继续添加 skyblue 50%，然后添加 gold 50%，在两种颜色之间设置一条硬线。然后用 orange 51% 和 saddlebrown 100% 完成渐变，如下代码块中高亮显示的 CSS 所示：
1[label styles.css]
2...
3.style-16 {
4 ...
5}
6
7.style-17 {
8 background-image: linear-gradient(175deg, navy 0%, dodgerblue 35%, skyblue 50%, gold 50%, orange 51%, saddlebrown 100%);
9}
将这些更改保存到 styles.css 中，然后在浏览器中刷新页面。这种颜色和停止点的渐变会产生一种错综复杂的渐变效果，看起来可能与沙漠地平线图像相似。下图显示了这种渐变在浏览器中的渲染效果：
在本节中，你将使用 CSS 函数 "linear-gradient() "创建双色渐变和由多种颜色和停止点组成的更复杂渐变。在最后一节中，您将在一个元素上创建多个背景。
使用多重背景法混合渐变图像
在最后一节中，您将结合本教程中的所有内容，为单个预览元素应用多个背景。多重背景可以帮助创建视觉上复杂的样式，同时使用最少的 HTML 元素。
首先，在文本编辑器中打开 index.html，然后在网格中添加最后一个项目，并将其类设为 style-18 和 <h2> 设为 Multiple Backgrounds。以下代码块中高亮显示的 HTML 将显示在文件中：
1[label index.html]
2...
3<div class="grid">
4 ...
5 <div class="item">
6 <div class="preview style-18"></div>
7 <div class="item-info">
8 <h2>Multiple Backgrounds</h2>
9 </div>
10 </div>
11</div>
12...
接下来，保存对 index.html 的更改，并在文本编辑器中打开 styles.css。创建一个 .style-18 类选择器，并添加一个 background 属性。由于多个背景可能会变得很长，因此将属性值放在与属性名称分开的独立行中可能会有所帮助。对于第一部分，再次加载蜂鸟图片 photo.jpg。然后添加 center / cover no-repeat，这将使图片居中显示在元素上，并缩放图片以填充空间，同时不重复图片。以下代码块中突出显示的 CSS 演示了如何在文本编辑器中编写此代码：
1[label styles.css]
2...
3.style-17 {
4 ...
5}
6
7.style-18 {
8 background:
9 url("./images/photo.jpg") center / cover no-repeat
10 ;
11}
将这些更改保存到 styles.css，然后返回浏览器并刷新页面。蜂鸟图像将居中显示在元素中，并按比例调整，如下图所示：
一只安娜蜂鸟将喙插入花朵中。图像覆盖整个元素。](assets/67917/23.jpg)
浏览器读取多个背景图片时，会对它们进行分层。如果要在蜂鸟图像上方添加渐变效果，则需要将渐变效果放在 "背景 "值中的图像之前。多层背景的每一层都用逗号隔开，这样就可以使用多组背景速记值。
要在蜂鸟图片上添加渐变效果，请返回到styles.css文件，找到.style-18选择器。在 background 属性和 url("./images/photo.jpg") center / cover no-repeat 之间添加一行新内容。然后，在括号中添加一个linear-gradient()字方向为to top left的linear-gradient()。在 dodgerblue 10% 后添加逗号，然后添加 transparent 80%。最后，在 "linear-gradient() "的结尾括号后再添加一个逗号，将其区分为多重背景，如以下高亮显示的代码所示：
1[label styles.css]
2...
3.style-18 {
4 background:
5 linear-gradient(to top left, dodgerblue 10%, transparent 80%),
6 url("./images/photo.jpg") center / cover no-repeat
7 ;
8}
将更改保存到 styles.css，然后刷新浏览器中的 index.html。渐变叠加蜂鸟图像，从右下角的全蓝色渐变到左上角的透明色，在浏览器中的呈现如下图所示：
接下来，你将在预览元素的左侧添加更多的重复图像背景叠加。
返回文本编辑器中的 styles.css 并在 background: 属性后添加一行新内容。使用url()函数从images目录中载入pattern-y.png。然后，将背景的位置设置为 center left 并添加一个斜线，将背景图片的大小设置为 64px。最后，将背景设置为repeat-y，使其垂直重复，并以逗号结束背景设置。下面代码块中突出显示的 CSS 演示了如何编写：
1[label styles.css]
2...
3.style-18 {
4 background:
5 url("./images/pattern-y.png") center left / 64px repeat-y,
6 linear-gradient(to top left, dodgerblue 10%, transparent 80%),
7 url("./images/photo.jpg") center / cover no-repeat
8 ;
9}
将更改保存到 styles.css，然后返回浏览器并刷新 index.html。新的顶层背景是元素左侧的粉色和橙色圆点图案。如下图所示，该图案同时覆盖了渐变和蜂鸟图像：
在本节中，你将使用前面几节中掌握的技能，为单个元素应用多重背景。多重背景是创建复杂样式的有用工具，无需额外的 HTML 开销。如果没有多重背景，要实现同样的效果，至少需要三个 HTML 元素和几个额外的样式属性，才能使这些元素相互分层并具有相同的尺寸。
结论
在本教程中，您将举例说明许多属性，以控制如何在 HTML 元素上显示背景。您应用了纯色、加载了图像资源并创建了渐变。您还调整了图片在元素上的平铺和重复方式，并调整了背景图片的大小，使其在空间中更加合适。您还将所有这些属性合并到 "背景 "速记中，并创建了多个背景。通过本教程，您创建了一个资源，可以反复参考，了解如何使用和组合这些背景属性来创建新内容。
如果您想阅读更多 CSS 教程，请尝试阅读 How To Style HTML with CSS 系列 中的其他教程。