CSS3背景
CSS3包含了一些新的背景属性，允许背景元素的控制。
在本章中，您将学习如何多背景图片添加到一个元素。
您还将了解以下新CSS3属性：
-
background-size -
background-origin -
background-clip
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-, -moz- ，或-o-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3多背景
CSS3允许您添加多背景图片为元素，通过background-image属性。
在不同的背景图像由逗号分隔，并且图像被堆叠在彼此的顶部，其中所述第一图像是最接近观看者。
下面的例子中有两个背景图像，所述第一图像是花（对齐的底部和右侧）和第二图像是纸的背景（对齐左上角）：
例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} 试一试» 多背景图片就可以利用个别背景属性（如上）或指定background速记属性。
下面的示例使用background速记属性（相同的结果上面的例子）：
例
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} 试一试» CSS3背景大小
CSS3的background-size属性允许你指定背景图片的大小。
CSS3之前，背景图像的大小为图像的实际大小。 CSS3允许我们重新使用背景图像在不同的上下文。
尺寸可在长度被指定，百分比，或通过使用两个关键字之一：包含或盖。
下面的例子中调整大小的背景图像比原始图像更小（使用像素）：
原始背景图片：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
调整大小背景图片：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
下面是代码：
例
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
试一试» 对于其他两个可能的值background-size是contain和cover 。
在contain关键字缩放的背景图像是尽可能大（但其宽度和高度二者必须适合在内容区域内）。 因此，根据背景图像和背景的定位区域的比例，可以存在未覆盖背景图像的背景的一些区域。
该cover关键字缩放的背景图像，使得内容区域由背景图像完全覆盖（其宽度和高度都等于或超过内容区域）。 因此，背景图像的某些部分可能不是在背景的定位区域中可见。
下面的例子说明了如何使用contain和cover ：
例
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
试一试» 定义多背景图片的尺寸
该background-size多背景的工作时，物业还接受背景大小多个值（用逗号分隔的列表）。
下面的例子有三个背景图像指定的，具有不同background-size为每个图像值：
例
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} 试一试» 全尺寸背景图片
现在，我们希望有一个网站，涵盖了在任何时候整个浏览器窗口上的背景图像。
的要求如下：
- 填写与图像的整个页面（无空格）
- 根据需要缩放图像
- 页面上的图像中心
- 不会导致滚动条
下面的示例演示如何做到这一点; 使用HTML元素（html元素始终是浏览器窗口的至少高度）。 然后设置就可以了固定和居中背景。 然后调整其与大小background-size属性：
CSS3 background-origin物业
CSS3的background-origin属性指定背景图像的位置。
该物业有三个不同的值：
- border-box -背景图像从边界的左上角开始
- padding-box - （默认）的背景图像从填充边缘的左上角开始
- content-box -背景图像从内容的左上角开始
下面的例子说明了background-origin属性：
例
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
试一试» CSS3 background-clip属性
CSS3的background-clip属性指定的背景画区域。
该物业有三个不同的值：
- border-box - （默认）的背景是画到边框的外边缘
- padding-box -背景涂到填充的外周缘
- content-box -背景是内容框画内
下面的例子说明了background-clip属性：
例
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
试一试» 自测练习用！
CSS3背景属性
| 属性 | 描述 |
|---|---|
| background | 简写属性在一个声明中设置所有的背景属性 |
| background-clip | 指定背景的绘画面积 |
| background-image | 指定一个或多个背景图像元素 |
| background-origin | 指定了背景图像（S）为/定位 |
| background-size | 指定背景图像的大小（S） |