CSS——background（背景）

• background-color（背景颜色）

1. 在块级标签中，显示一整行背景颜色，
2. 在行内块中，显示设置的长宽背景颜色
3. 在行内中，显示文字内的背景颜色

body {
  background-color: lightblue;
}

• background-image（背景图片）

1. 默认情况下，图像会重复，以覆盖整个元素。
2. 使用背景图像时，请使用不会干扰文本的图像。
3.  

body {
  background-image: url("paper.gif");
}

• background-repeat（平铺图像）

1. repeat（默认平铺）

默认为水平和垂直方向上都重复图像（）

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat;
}

2. repeat-x（水平重复）

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

3. no-repeat（单图不重复）

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

• background-attachment（滚动定位）

默认scroll，跟滚轮一起滚动。fixed固定不动。

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

• background-position（图像移位）

1. 可以使用 center，top，buttem，left，right，来进行移动。

2. 也可以是使用数字（0 0）进行微调。

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

该技术多用于在一个大图内，放置很多个小图，通过设置窗口大小，将图片移位来显示出相应的图片。这样加载一个大图会比加载很多个小图要更加的减轻服务器的负担。这种技术叫（雪碧图）

• background简写

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。