共计 3662 个字符，预计需要花费 10 分钟才能阅读完成。
咱们平时看到的网页中会有各式各样的背景款式，例如有用色彩作为背景的，也有图片作为背景的。增加背景款式可能让网页更好看，那么要如何设置页面的背景款式呢，这就是本节咱们要学习的内容。
背景色彩
首先咱们来讲如何设置背景色彩，浏览器页面的默认背景色彩为红色，然而很多时候为了页面的好看咱们会从新设置一个背景色彩，个别在一个网站中大部分页面都会采纳某个对立的背景色彩。
咱们能够通过 CSS 中的 background-color 属性来设置背景色彩，这个属性能够承受任何非法的色彩值，像色彩名称、十六进制色彩值、RGB 色彩都能够。
咱们能够给所有的元素设置背景色，例如 body、h1、p、a、div 等等。
示例：
例如咱们将页面的背景色彩设置为 #E0E0E0、题目的背景色彩设置为绿色 #33CC66，段落的背景色彩为红色 #FFFFFF：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS 学习 (9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h1> 侠课岛欢送你！</h1>
<p> 段落背景为红色 </p>
<p> 段落背景为红色 </p>
<p> 段落背景为红色 </p>
</body>
</html> 在 index.css 页面中的 CSS 款式代码：
body{background-color: #E0E0E0;}
h1{background-color: #33CC66;}
p{background-color: #FFFFFF;} 在浏览器中演示成果为：
如果应用的是内部款式要记得在 HTML 页面引入 .css 文件哟，否则 CSS 代码不会失效。
当初你能够试着应用一下 background-color 属性，假如在 <body> 标签内有一个 <div> 标签，咱们须要给这个 <div> 标签设置一些款式，例如设置它的宽高别离为 300px，背景色彩为 #FF9966。而后在浏览器中关上这个页面，会产生什么成果呢？
背景图像
咱们除了能够将元素的背景设置成各种色彩，还能够将背景设置成图片，能够应用 background-image 属性来设置背景图片。属性值的格局为：url('图片地址')。
示例：
咱们筹备了一张 310x210 的玫瑰花图片（大家本人找一张图片来测试也可），而后将这张图片设置为 <body> 标签的背景图片，应用标签选择器设置款式：
body{background-image: url(./flower.png);
} 在浏览器中演示成果为：
咱们能够看到上图中，尽管背景图片设置胜利，然而图片反复很多张，如果咱们不想背景图片反复，就须要用到 background-repeat 属性。
背景反复
咱们能够应用 background-repeat 属性来设置背景图片是否反复（平铺）。
可选的属性值如下所示：
| 属性值 | 形容 |
|---|---|
| repeat | 默认，背景图像将在垂直方向和程度方向反复 |
| repeat-x | 背景图像将在程度方向反复 |
| repeat-y | 背景图像将在垂直方向反复 |
| no-repeat | 背景图像将仅显示一次 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置 |
在理论利用中，个别咱们用的比拟多的属性值是 no-repeat，设置图片不反复。
示例：
咱们来看一下上述几个属性值的演示成果，例如设置背景图片仅在程度方向反复：
body{background-image: url(./flower.png);
background-repeat: repeat-x;
} 在浏览器中演示成果为：
也能够将属性值设置为 no-repeat，用于设置背景图片不反复：
body{background-image: url(./flower.png);
background-repeat: no-repeat;
} 在浏览器中演示成果为：
图像尺寸
上述示例中，如果咱们心愿整张背景图片都充斥整个页面，能够应用 background-size 属性来实现，此属性用于设置背景图像的尺寸。
可选的属性值如下所示：
| 属性值 | 形容 |
|---|---|
| length | 设置背景图像的高度和宽度，如果只设置一个值则第二个值会被设置为 “auto” |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度 |
| cover | 把背景图像扩大至足够大，以使背景图像齐全笼罩背景区域 |
| contain | 把图像扩大至最大尺寸，以使其宽度和高度齐全适应内容区域 |
示例：
例如咱们将背景图片设置为笼罩全副背景区域，能够应用 cover 属性值：
body{background-image: url(./flower.png);
background-repeat: no-repeat;
background-size: cover;
} 在浏览器中演示成果为：
背景定位
背景定位就是咱们能够依据需要将背景图片定位到页面的右边、左边、两头、底部等等任意地位，要实现背景定义，能够应用 background-position 属性。
可选的属性值如下所示：
| 属性值 | 形容 |
|---|---|
| top、bottom、left、right、center | 通常这些关键字会成对呈现，如果只设置一个关键字，那么第二个值将默认为 center |
| x% y% | 将属性值设置成百分比，第一个值是程度地位，第二个值是垂直地位 |
| xpos ypos | 单位是像素，第一个值是程度地位，第二个值是垂直地位 |
示例：
例如将背景图片定位到程度垂直居中地位：
body{background-image: url(./flower.png);
background-repeat: no-repeat;
background-position: center;
} 在浏览器中演示成果为：
上述代码中，咱们将 background-position 的属性值设置成了 center，并且因为此属性的属性值是成对呈现的，如果没有设置第二个属性值，则其默认为 center，所以最终背景图片会程度垂直居中显示。
你能够本人入手设置 background-position 属性的值，例如将背景图片定位为 bottom right 、100px 200px、30% 70%，看看这三组属性值最终会生成什么成果。
背景关联
咱们晓得当页面的内容超出了浏览器的高度时，浏览器会主动呈现滚动条。如果咱们给某个页面设置了一个背景图像，随着滚动条向下滚动，背景图片也会跟着滚动，大家能够本人入手验证一下看看是不是这样。
所以如果咱们心愿背景图片固定在某个中央，当咱们滚动滚动条时，不影响背景图片，要怎么办呢？
能够通过 background-attachment 属性来实现，此属性的作用就是用于设置背景图片是否固定或者随着页面的其余部分滚动。
可选的属性值如下所示：
| 属性值 | 形容 |
|---|---|
| scroll | 默认值，背景图像会随着页面其余部分的滚动而挪动 |
| fixed | 当页面的其余部分滚动时，背景图像不会挪动 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置 |
示例：
将背景图片设置为固定，不随滚动条滚动：
body{background-image: url(./flower.png);
background-repeat: no-repeat;
background-attachment: fixed;
} 在浏览器中演示成果为：
能够看到当咱们将 background-attachment 属性设置为 fixed 时，向下滚动滚动条时，背景图像是固定不变的。
简写背景款式
咱们能够通过 background 属性来简写上述讲到的几个背景款式属性。
background 属性能够简写的属性有如下所示：
| 属性 | 形容 |
|---|---|
| background-color | 设置背景色彩 |
| background-position | 设置背景图像的地位 |
| background-size | 设置背景图像的尺寸 |
| background-repeat | 设置背景图像是否反复 |
| background-origin | 设置背景图片的定位区域 |
| background-clip | 设置背景的绘制区域 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 |
| background-image | 设置背景图像 |
在 background 属性中设置上述任意一个或多个属性的属性值，如果不设置其中的某个值，也不会出问题。
示例：
例如能够在 background 属性中同时设置页面背景色彩、背景图片、图片不平铺、图片固定、图片居中：
body{background: pink url(./flower.png) no-repeat fixed center;
}在浏览器中演示成果为：
上图中，如果咱们不应用简写属性，则须要写 5 句 CSS 代码能力实现，然而通过应用 background 属性一句代码就搞定了，不便了很多。所以举荐应用 background 属性来设置背景款式。
总结
那么本节咱们对于背景款式的内容就学到这里，其实这些属性都很简略，大家能够将上述讲到的几个属性多应用几次，给它们设置不同的属性值，看看不同的属性值的演示成果有什么不同。