8、CSS3 背景

1) CSS3 多重背景图片
CSS3允许设置多个背景图像。
如：background-image: url(image/背景1.jpg), url(image/chrome.png);

2) background-size 属性，背景图片的尺寸
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
background-size 属性的值有以下几种：

  1. 宽度和高度的具体值，如：background-size: 800px 600px;
    若只规定宽度或高度的其中一个具体值，那么另一个未设定的值将根据已设定的值按原比例拉伸。

  2. 宽度和高度的百分比，如：background-size: 90% 100%;
    若只规定宽度或高度的其中一个百分比，那么另一个未设定的值仍为100%。

  3. contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

  4. cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

3) background-origin 属性
background-origin 属性规定背景图片的定位区域。背景图片可以放置于

content-box、padding-box 或 border-box 区域。
有以下三个值

  1. padding-box 背景图像相对于内边距框来定位。
  2. border-box 背景图像相对于边框盒来定位。
  3. content-box 背景图像相对于内容框来定位。

4) background-clip 属性
background-clip 属性规定背景的绘制区域。
有以下三个值

  1. border-box 背景被裁剪到边框盒。
  2. padding-box 背景被裁剪到内边距框。
  3. content-box 背景被裁剪到内容框。