作为Write for DOnations计划的一部分，作者选择了科技多样性基金来接受捐赠。
简介
当建立一个网站时，背景风格在设计的视觉美学中起着很大作用。无论你是在建立一个按钮还是一个大的互动区域，背景风格都提供了定义，并可以区分特定用途的区域。了解CSS中的背景系列属性可以做什么，将有助于你创建更有效的代码和视觉上有趣的设计。
在本教程中，你将创建一个元素网格，每个元素都展示了为元素应用背景的不同方式。通过创建一系列分组的例子，你最终将获得一个参考工具和一个尝试不同背景属性的地方。你将创建一个包含18种背景颜色、图像和梯度变化的表单。每个变体都将使用与背景有关的属性来实现一个特定的效果。最后一个变化将在一个单一的元素上结合许多方法，创造一个多背景的效果。
前提条件
- 对CSS的级联和特殊性功能有一定的了解，你可以通过阅读《如何用级联和特殊性将CSS样式应用于HTML》来获得。
- 对类型选择器、组合选择器和选择器组的了解，可以在《如何用CSS选择HTML元素的样式》中找到。
- 熟悉颜色值，你可以在《如何使用CSS的颜色值》中找到。
- 在你的本地机器上保存一个空的HTML文件（
index.html），你可以从你选择的文本编辑器和网络浏览器中访问。要开始学习，请查看我们的《如何设置你的HTML项目》教程，并按照《如何使用和理解HTML元素》的说明在浏览器中查看你的HTML。如果你是HTML的新手，可以试试整个《如何用HTML建立网站》系列。
设置初始HTML和CSS
要开始使用背景造型，你首先要设置HTML和CSS代码，你将在本教程的其余部分进行操作。在本节中，你将写出所有必要的HTML和一些初始的CSS样式，这些样式将处理布局并为视觉美感奠定基础。
首先，在你的文本编辑器中打开index.html 。然后，在该文件中添加以下HTML。
index.html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
接下来，进入<head> 标签，添加一个<meta> 标签，以定义HTML文件的字符集。设置页面的标题，添加一个<meta> 标签，定义移动设备应如何呈现页面，最后用<link> 标签加载你稍后要做的CSS文件。
这些添加的内容在下面的代码块中得到了强调。在整个教程中，随着代码的添加和修改，你会遇到这种突出显示的方法。
index.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 文件中。
index.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 文件中，添加以下代码。
styles.css
body {
font-family: system-ui, sans-serif;
color: #333;
}
h1 {
text-align: center;
}
body 元素选择器将页面的字体从默认的衬线字体改为操作系统的字体（如果支持的话），然后再回落到无衬线字体。h1 选择器将文本在页面上居中。
接下来，你将在.grid 类选择器中添加一个_CSS网格_，这是一个综合布局属性的集合。以下代码块中高亮显示的CSS表示将被添加到styles.css 。
styles.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 属性使该元素使用CSS网格，其值为grid 。一旦设置好了，其他两个属性，grid-template-columns 和grid-gap ，现在将影响.grid 元素的内容，你将在后面添加。grid-template-columns 规定将有3 列，它们的最小宽度为100px ，最大宽度为整个宽度的1fr （分数）。由于有三列，这个分数将是33.333%。最后，grid-gap 定义了在网格的每一行和每一列之间，都有1.5rem 的间距。
接下来，你将为你将在后面的章节中编写的HTML再添加两个类选择器。添加一个.item 类选择器，它将适用于每个变体的网格项目。然后，添加一个.preview 类选择器，它将包含背景样式的演示。下面代码块中的高亮CSS演示了如何设置。
styles.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 OlsenonUnsplash)
在本节中，你准备了HTML和CSS，它们将在本教程的其余部分支持你的代码。你还下载了演示图片，并将它们添加到images 目录中，与你的index.html 和styles.css 文件放在一起。在下一节中，你将设置一个background-color 和一个background-image 。
在元素上使用background-color 和background-image
你可以在HTML元素中填充两种类型的背景之一：一种颜色或一种图像。CSS生成的渐变是图像的一种类型，在本教程的后面将介绍。在本节中，你将为一个元素应用一个颜色背景，然后加载一个图像文件作为一个元素的背景。
首先，在你的文本编辑器中打开index.html ，在<div class="grid"> 元素中加入以下代码块中的高亮HTML。
index.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 。然后，在新的选择器块中，添加一个名为background-color 的属性，其值为deeppink 。下面的代码块中突出显示的CSS显示了这将是什么样子。
styles.css
...
.preview {
height: 16rem;
}
.style-01 {
background-color: deeppink;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。现在你将在第一个变体中看到一个粉红色的图像，如下图所示。
background-color 属性将接受任何有效的CSS颜色，包括有alpha通道的颜色，如RGBA和HSLA。你可以使用alpha通道为背景色提供透明度。
接下来，回到index.html ，添加一个新的变体，这次将类递增到style-02 。同时将<h2> 元素的文本设置为Background Image 。以下代码块中突出显示的HTML演示了这将在你的文件中出现。
index.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所演示的。
styles.css
...
.style-01 {
...
}
.style-02 {
background-image: url("./images/photo.jpg");
}
保存你对styles.css 的修改，然后在你的网络浏览器中刷新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显示了这将在你的文件中出现。
index.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 图像，如下面代码块中所强调的。
styles.css
...
.style-02 {
...
}
.style-03 {
background-image: url("./images/pattern.png");
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新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演示了这将如何出现在你的文件中。
index.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轴重复。接下来，添加一个background-repeat 属性，其值设置为repeat-x ，如下面的代码块所强调的。
styles.css
...
.style-03 {
...
}
.style-04 {
background-image: url("./images/pattern-x.png");
background-repeat: repeat-x;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。默认情况下，重复的背景图像从元素的左上角开始。因此，图案将沿着预览元素的顶部部分区域从左到右重复，如下图所示。
正如背景可以被设置为从左到右重复一样，它也可以被设置为从上到下重复。你可以通过将background-repeat 属性设置为repeat-y ，这将使图像沿着Y轴以单列形式重复。这对于沿容器的左侧或右侧边缘创建视觉效果很有用。
要开始使用y轴，在文本编辑器中打开index.html ，并在网格中添加一个新的项目，其类别为style-05 ，<h2> ，属性为Background Repeat Y 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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 ，正如下面的代码块中所强调的。
styles.css
...
.style-04 {
...
}
.style-05 {
background-image: url("./images/pattern-y.png");
background-repeat: repeat-y;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。现在，该图案将沿着预览元素的左边缘向下重复，如下图所示。
通常情况下，完全不重复背景图片是很有用的。这可能发生在视觉图形被添加为背景而不是HTML<img /> 的情况下，比如有时会使用标志或图标。通过将background-repeat 属性设置为no-repeat 的值，可以完全禁止重复。
要开始，在你的文本编辑器中回到index.html ，并在网格中添加另一个项目，其类别为style-06 ，并在<h2> ，元素为Background No Repeat 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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 文件中出现。
styles.css
...
.style-05 {
...
}
.style-06 {
background-image: url("./images/pattern.png");
background-repeat: no-repeat;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新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> ，Background Position 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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块，加载pattern.png 文件的background-image ，并将background-repeat 属性设置为no-repeat ，这样定位就更容易识别。最后，添加一个background-position 属性，并一起使用bottom right 的命名值，将图像锚定在与默认值相邻的角上。下面代码块的突出显示的CSS表明了这是如何写的。
styles.css
...
.style-06 {
...
}
.style-07 {
background-image: url("./images/pattern.png");
background-repeat: no-repeat;
background-position: bottom right;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。现在，在预览元素的右下角有一个pattern.png 文件的实例显示，如下图所示。
background-position 属性可以接受两个命名的值，每个轴都有一个。对于X轴，这些值是：left,center, 和right 。对于Y轴，这些值是top,center, 和bottom 。center 命名的值在两个轴上都有，可以结合起来将背景图像定位在一个元素的绝对中间。
要使背景图像居中，首先在文本编辑器中打开index.html ，并在网格中添加一个新的项目，其类别为style-08 ，而<h2> 元素为Background Position Center 。以下代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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显示了这是如何设置的。
styles.css
...
.style-07 {
...
}
.style-08 {
background-image: url("./images/pattern.png");
background-repeat: no-repeat;
background-position: center;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。现在，pattern.png 的单一实例已经漂浮在预览元素的中心，如下图所示。
你也可以使用数字值和命名值来定义一个background-image 的起始位置。当你想把背景图片从元素的边缘偏移一个设定的或相对的数量时，这可能很有用。
首先，回到文本编辑器中的index.html ，在网格中添加另一个类别为style-09 的项目和一个<h2> 的元素Background Position Numeric 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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 。接下来，创建一个.style-09 类选择器，其中有一个加载pattern.png 文件的background-image 属性和一个带有no-repeat 值的background-repeat 属性。然后，添加一个值为right 10% bottom 40px 的background-position 属性，正如下面的代码块所强调的。
styles.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%，从右边开始。然后，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 文件的大小。
要开始调整一个background-image ，在你的文本编辑器中打开index.html 。然后，在网格中添加一个新的项目，其类别为style-10 ，<h2> ，Background Size Contain 。以下代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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 ，正如下面的代码块中所强调的。
styles.css
...
.style-09 {
...
}
.style-10 {
background-image: url("./images/photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。现在图像将被缩小，完全包含在元素中，正如background-size 的命名值contain 所示。蜂鸟的图像现在是完全可见的，而如果没有background-size ，就只能显示一部分。下面的图片展示了这将在你的浏览器中出现。
接下来，你将设置background-size 的值来调整大小，使其完全覆盖该元素的背景空间。首先在你的文本编辑器中打开index.html ，在网格中添加另一个类别为style-11 的项目和一个<h2> 的元素Background Size Cover 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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演示了如何在你的文本编辑器中写这个。
styles.css
...
.style-10 {
...
}
.style-11 {
background-image: url("./images/photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。
background-image 现在将填满整个元素，但会被缩小以适应。cover 的值将根据元素的方向调整background-image 的大小。如果该元素是_横向_的，意味着它的宽度大于高度，那么background-image 将被调整大小，使其宽度与该元素相同。这导致在这种情况下，background-image 的高度比元素高，因此被元素的边界截断。下面的图片展示了background-image ，其background-size ，cover ，在浏览器中会如何显示。
最后，background-size 值也可以接受数字值。要使用数字值，请在文本编辑器中返回到index.html 。接下来，在网格中添加一个新的项目，其类别为style-12 ，并添加一个<h2> ，元素为Background Size Numeric 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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 的选择器块中。
然后，添加background-size 属性，其数值为30% 。当你提供background-size 属性为一个单一的数值时，它将对图像的高度和宽度应用相同的数值。为了保持图像的长宽比，可以在30% 后面加上auto ，这样就可以将图像的宽度设置为30%，高度则按比例设置。突出显示的CSS表示.style-12 选择器块和属性将在你的文本编辑器中出现。
styles.css
...
.style-11 {
...
}
.style-12 {
background-image: url("./images/photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 30% auto;
}
保存你对styles.css 的修改，然后返回你的网络浏览器，刷新index.html 。蜂鸟的图像现在在元素的中心按比例放大了30%的宽度，如下图所示。
在本节中，你使用了backround-size 属性来缩放背景图像，使其在元素中完全可见，其值为contain 。你使用cover 属性来调整背景图像的大小，以便在覆盖整个元素的同时尽可能多地显示图像。最后，你用一个数字值将背景图像缩放到一个设定的大小，并使用auto 值来保持缩放比例。在下一节，你将使用background-attachment 属性来防止背景图像随其元素滚动。
用background-attachment 属性粘贴背景图像
background-attachement 属性使background-image 静止不动。这创造了一种效果，内容在图像上滑动，就像它漂浮在上面一样。在本节中，你将使用background-attachment 属性来创建这种效果。
首先，在你的文本编辑器中打开index.html ，并在网格中添加一个新的项目，其类别为style-13 ，<h2> ，Background Attachment 。以下代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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 文件。使用这个图片的默认值，这样图片就会重复，以填充整个元素。最后，添加background-attachment 属性，其命名值为fixed ，在下面的代码块中强调。
styles.css
...
.style-12 {
...
}
.style-13 {
background-image: url("./images/pattern.png");
background-attachment: fixed;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新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显示了这将在你的文件中出现。
index.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 速记属性。对于该值，添加一个url() 函数，从你的images 目录中加载pattern.png 。在该函数之后，添加一个空格，并添加名为center 的值，这将应用一个background-position 的值。接下来，添加另一个空格，命名值为repeat-x 。最后，添加一个命名的颜色值gold ，并以分号结束该行，如下面的代码块中所强调的。
styles.css
...
.style-13 {
...
}
.style-14 {
background: url("./images/pattern.png") center repeat-x gold;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新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显示了这将在你的文件中出现。
index.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 文件中出现。
styles.css
...
.style-14 {
...
}
.style-15 {
background: url("./images/pattern.png") center / 64px #222;
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新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显示了这将在你的文件中出现。
index.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 ，如下面的代码块中所强调的。
styles.css
...
.style-15 {
...
}
.style-16 {
background-image: linear-gradient(to right, deeppink, orange);
}
保存你对styles.css 的修改，然后回到你的网络浏览器，刷新index.html 。浏览器将绘制一个梯度，左边是deeppink ，右边是过渡到orange ，如下图所示。
所有的渐变都允许多个颜色值和停止点，停止点可以是一个固定值，也可以是一个百分比。开始时，在文本编辑器中返回index.html ，并在网格中添加另一个项目，其类别为style-17 ，而<h2> ，其类别为Linear Gradient with Stops 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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所描述的那样。
styles.css
...
.style-16 {
...
}
.style-17 {
background-image: linear-gradient(175deg, navy 0%, dodgerblue 35%, skyblue 50%, gold 50%, orange 51%, saddlebrown 100%);
}
将这些修改保存到styles.css ，然后在你的浏览器中刷新该页面。这种颜色和停止点的递增创造了一个复杂的梯度，可能看起来类似于沙漠的地平线图像。下面的图片显示了这个渐变在浏览器中的渲染效果。
在本节中，你使用linear-gradient() CSS函数创建了一个双色渐变和一个由几种颜色和停止点组成的更复杂的渐变。在最后一节中，你将在一个元素上创建多个背景。
使用多背景方法将图像与梯度混合在一起
在最后一节，你将结合本教程中的所有内容，在一个预览元素上应用多个背景。多重背景可以帮助创建视觉上的复杂样式，同时使用最少的HTML元素。
首先，在你的文本编辑器中打开index.html ，将最后一个项目添加到网格中，其类别为style-18 ，而<h2> ，其类别为Multiple Backgrounds 。下面代码块中突出显示的HTML显示了这将在你的文件中出现。
index.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演示了如何在你的文本编辑器中写这个。
styles.css
...
.style-17 {
...
}
.style-18 {
background:
url("./images/photo.jpg") center / cover no-repeat
;
}
将这些修改保存到styles.css ，然后返回到你的网络浏览器，刷新页面。蜂鸟图像将在该元素中居中，并按比例调整，如下图所示。
多个背景图像在被浏览器读取时是分层的。要在蜂鸟图像上方添加渐变，渐变需要在background 值中出现在图像之前。多个背景的每一层都用逗号隔开，这样就可以有多组background 速记值。
为了在蜂鸟图像上添加渐变，请返回到你的styles.css 文件和.style-18 选择器。在background 属性和url("./images/photo.jpg") center / cover no-repeat 之间添加一个新行。然后，在括号中添加一个linear-gradient() ，字的方向为to top left 。添加一个逗号，后面是dodgerblue 10% ，然后是transparent 80% 。最后，在linear-gradient() 的结尾括号后再加一个逗号，以区分它是一个多重背景，如以下高亮代码所示。
styles.css
...
.style-18 {
background:
linear-gradient(to top left, dodgerblue 10%, transparent 80%),
url("./images/photo.jpg") center / cover no-repeat
;
}
保存你对styles.css 的修改，然后在你的网络浏览器中刷新index.html 。梯度覆盖在蜂鸟图像上，从右下角的全蓝到左上角的透明，在浏览器中的呈现如下图所示。
接下来，你将在预览元素的左侧再添加一个重复图像的背景叠加。
在你的文本编辑器中返回styles.css ，在background: 属性后添加一个新行。使用url() 函数，从images 目录中加载pattern-y.png 。之后，将背景的位置设置为center left ，并添加一个正斜杠，将背景图片的大小设置为64px 。最后，将背景设置为repeat-y ，使其在垂直方向上重复，并用逗号结束背景设置。下面代码块中突出显示的CSS演示了如何编写。
styles.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 的修改，然后回到你的网络浏览器，刷新index.html 。新的顶层背景是元素左侧的粉色和橙色圆点图案。该图案同时覆盖了梯度和蜂鸟图像，如下图所示。
在这一节中，你使用了在前面几节中掌握的技能，将多个背景应用于一个元素。多重背景是创建复杂样式的一个有用工具，不需要额外的HTML开销。如果没有多重背景，同样的效果至少需要三个HTML元素和几个额外的样式属性，才能使这些元素分层在一起并具有相同的尺寸。
总结
在本教程中，你通过许多属性的例子来控制HTML元素上的背景如何呈现。你应用了纯色，加载了图像资源，并创建了梯度。你调整了图像在元素上的平铺和重复方式，并调整了背景图像的大小，以适应不同的空间。你还将所有这些属性结合到background 速记中，并组成多个背景。通过本教程，你创建了一个资源，你可以反复参考如何使用和组合这些许多背景属性来创造新的东西。
如果你想阅读更多的CSS教程，可以试试《如何用CSS为HTML定型》系列中的其他教程。
