上一章CSS3高级教程请查看：css3颜色color
使用CSS3，你可以对元素应用多个背景。
使用CSS3背景CSS3提供了几个新的属性来操作元素的背景，比如背景裁剪、多个背景以及调整背景大小的选项。
以下部分将介绍CSS3的所有新背景特性，有关其他背景属性，请参阅CSS背景教程。
CSS3 background-size属性【css3背景background –
CSS3高级教程】background-size属性可用于指定背景图像的大小。在CSS3之前，背景图像的大小是由图像的实际大小决定的。可以使用像素或百分比值以及关键字auto、contains和cover来指定背景图像的大小，不允许有负值。
.box {
width: 250px;
height: 150px;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
border: 6px solid #333;
}
提示：background-size属性通常用于创建全尺寸的背景图像，它根据浏览器的viewport或witdh的大小进行缩放。
CSS3 background-clip属性background-clip属性可用于指定元素的背景是否扩展到边框中，background-clip属性可以接受三个值：border-box、paddting -box、content-box。
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: orange;
background-clip: content-box;
}
CSS3 background-origin属性background-origin属性可用于指定背景图像的定位区域，它可以采用与background-clip属性相同的值:border-box、padding-box、content-box。
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
background-origin: content-box;
}
注意：如果background-attachment属性的值被指定为“fixed”，那么background-origin属性将被忽略。
CSS3多个背景CSS3允许你向单个元素添加多个背景，背景是层叠的，层的数量由background-image或background速记属性中逗号分隔值的数量决定。
.box {
width: 100%;
height: 500px;
background: url("images/birds.png") no-repeat center,url("images/clouds.png")no-repeat center, lightblue;
}
以逗号分隔的背景列表中的第一个值，即background-image ‘ birds.png’ 将出现在顶部，最后一个值即’ lightblue’ 将出现在底部，只有最后一个背景可以包含背景色。
推荐阅读
- css3渐变gradient – CSS3高级教程
- css3颜色color – CSS3高级教程
- css3边界border – CSS3高级教程
- 验证css代码 – CSS高级教程
- css属性选择器 – CSS高级教程
- css透明度opacity – CSS高级教程
- css精灵sprite – CSS高级教程
- css媒体类型 – CSS高级教程
- css伪元素用法 – CSS高级教程