background-color：背景色
前面我们经常用background-color这个属性来设置元素的背景色，例如下面这条css可将段落的背景色设置为灰色
p {background-color: gray;}
如果想要元素的背景色向外延伸，则只需增加内边距即可
background-color可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
注意：background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
background-image：背景图像
除了可以为元素设置背景色之外，还可以用background-image属性为元素设置背景图像，其默认值是 none，表示元素背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(img/a.jpg);}
通常情况下背景应用于 body 元素。
注意：同background-color一样，background-image 也不能继承，事实上，所有背景属性都不能继承。背景图片会盖住背景颜色。也就是说背景图片的优先级要高于背景色。
background-repeat：背景重复
上面中的例子中，我们看到图片铺满了整个屏幕，如果需要设置是否需要平铺以及平铺的方向，可以使用background-repeat属性
|
属性值 |
效果 |
|
repeat |
水平垂直方向上都平铺 |
|
repeat-x |
水平方向上平铺 |
|
repeat-y |
垂直方向上平铺 |
|
no-repeat |
不平铺 |
background-position：背景定位
默认情况下，背景图片的位置的在元素的左上角，这时可以利用 background-position 属性改变图像在背景中的位置。
background-position可能的值
background-attachment：背景关联
scroll： 默认值，背景图像会随着页面其余部分的滚动而移动。
fixed：固定显示，相对于body固定。一般只用于body的背景设置。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS背景</title>
6 <style type="text/css">
7 body {
8 background-image: url(img/a.jpg);
9 background-repeat: no-repeat;
10 background-attachment: fixed;
11 }
12 </style>
13 </head>
14 <body>
15 <p>图像不会随页面的其余部分滚动。</p>
16 <p>图像不会随页面的其余部分滚动。</p>
17 ...
18 <p>图像不会随页面的其余部分滚动。</p>
19 </body>
20 </html>
属性合写
可以将上面讲到的属性用background属性进行合写，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
background合写的顺序： 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。如：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS属性合写</title>
6 <style type="text/css">
7 body {
8 background: yellow url(img/a.jpg) no-repeat scroll center top;
9 }
10 </style>
11 </head>
12 <body>
13 <p>段落1</p>
14 <p>段落2</p>
15 ...
16 <p>段落20</p>
17 </body>
18 </html>
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}
table.MsoTableGrid
{mso-style-name:网格型;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-priority:39;
mso-style-unhide:no;
border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-border-insideh:.5pt solid windowtext;
mso-border-insidev:.5pt solid windowtext;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}