一、css3背景
css3包含多个新的背景属性，它们提供了对背景更强大的控制，可以自定义背景图的大小，可以规定背景图片的定位区域，css3还允许我们为元素使用多个背景图像
|
属性 |
描述 |
css |
|
background-image |
规定背景的背景图 |
2 |
|
background-position |
规定背景的定位 |
2 |
|
background-repeat |
规定背景的重复方式 |
2 |
|
background-color |
规定背景的颜色 |
2 |
|
background-clip |
规定背景的绘制区域 |
3 |
|
background-origin |
规定背景图片的定位区域 |
3 |
|
background-size |
规定背景图片的尺寸 |
3 |
二、css3背景<background-clip>
//背景图片从哪里开始剪切
语法：background-clip: border-box|padding-box|content-box;
border-box：背景被裁剪到边框盒 //背景从边框填充
padding-box：背景被裁剪到内边距框 //背景从padding所住位置填充
content-box：背景被裁剪到内容框 //背景从内容部分开始填充
三、css3背景<background-origin> //背景定位
语法：background-origin: padding-box|border-box|content-box;
border-box：背景图像相对于边框盒来定位
padding-box：背景图像相对于内边距来定位
content-box：背景图片相对于内容框来定位
实例：
.div{
background-image("1.jpg");
background-position:10px 10px;
background-origin:content-box; //background-position相对于content-box进行偏移
}
四、css3背景<background-size>
语法：background-size: length|percentage|cover|contain
length：设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为auto
例如：
percentage： 以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为auto
cover： 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
contain： 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 //按照一边的比例，或者高的比例，或宽的比例，填充背景，另一边自适应。
五、使用多个背景图片
.div{
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-size: 100px 100px, 200px 200px, 300px 300px;
background-position:10px 10px, 30px 30px, 40px 40px;
}
