CSS3的常规属性
背景属性——background
? 在css中使用background属性来设置背景，它的值有以下几个：
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明当中。 |
| background-color | 设置的是背景颜色。（颜色名 十六进制 rgb() rgba()） |
| background-image | 设置背景图像，图像默认水平垂直平铺 |
| background-repeat | 设置背景图像平铺或者不平铺 |
| background-attachment | 设置背景图像固定或者随着页面的区域部分滚动 |
| background-position | 设置背景图像的起始位置。 |
【注意】背景图像属性background-image使用的是url函数，而不是herf属性。
?
background-repeat：它的值有以下几种：
repeat：背景图像将向垂直和水平方向重复。这是默认
repeat-x：只有水平位置会重复背景图像
repeat-y：只有垂直位置会重复背景图像
no-repeat：background-image不会重复
inherit：指定background-repea属性设置应该从父元素继承
body {
background-image: url(./img/test.jpg);
}
默认情况如下图：
它会在水平和垂直方向上同时平铺，即默认值repeat。
repeat-x：
body {
background-image: url(./img/test.jpg);
background-repeat: repeat-x;
}
结果：
repeat-y：
body {
background-image: url(./img/test.jpg);
background-repeat: repeat-y;
}
结果：
no-repeat：（不平铺）
body {
background-image: url(./img/test.jpg);
background-repeat: no-repeat;
}
结果：
background-attachment：页面的固定或者不固定。 它的值有以下几种：
scroll：背景图片随着页面的滚动而滚动，这是默认的。
fixed：背景图片不会随着页面的滚动而滚动
local：背景图片会随着元素内容的滚动而滚动。
bbackground-attachment：scroll：
默认值就是scroll，当滚动页面的滚动条，它会随着页面滚动。
background-attachment：fixed：
这时就不会随着页面滚动。
background-position：背景图片的定位 它的值有三种：方位组合性名词，百分数，px。其中定位有两个值，第一个值代表水平方向，达第二个代表垂直方向。
?
方位组合性名词：（水平方向的方位名词：left center right 垂直方向的方位名词：top center bottom）
left top 左边的上边 默认值
left center：左边的中间
left bottom：左边的下边
right top：右边的上边
right center：右边的中间
right bottom：右边的下边
center top：中间的上面
center center：中间的中间
center bottom：中间的下面
对应上面的九个方位如下图所示：
当只写一个值时，第二个值默认为center：
body {
background-image: url(./img/test.jpg);
background-repeat: no-repeat;
height: 1500px;
background-position: center;/*水平方向上为center 省略的垂直默认为center*/
}
结果：
百分比值：第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％ 水平居中：50% 50%
px：具体的定位，同样也是两个值，一个代表水平方向的，一个代表垂直方向的。百分比和px单位也是可以混用的，当然这里也可以使用其他的单位，这里我举例使用的是px单位。
综上所述，我们可以把背景的几个属性写在一个属性中：background
注意一下他的书写顺序：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
如下述代码：
body {
height: 1500px;
background: url(img/test.jpg) no-repeat fixed center;/*background属性的简写*/
}
【注意】各个属性值之间使用空格连接。
CSS3中新增的背景属性
多背景
? 在css3中新增了几个背景属性，其中对background-image进行了进一步的优化，即可以引入多个背景图片，之前的版本之呢个使用一个图片作为背景。
div {
width: 500px;
height: 500px;
background-image: url(img/01.gif),url(img/02.gif);/*同时使用两张图片作为背景，中间使用逗号隔开*/
background-repeat: no-repeat,repeat;/*对于两个背景，分贝使用两个不同的属性值设置 中间使用逗号隔开*/
background-position: right bottom,center;
}
结果：
background-size：指定背景图像的大小
在之前 版本中，背景图像的大小只能由它的实际大侠来决定，该属性则是用于设置背景图像的大小。
同样也是两个值，分别代表宽度和高度，可以使用百分比，也可以使用px单位。
div {
width: 500px;
height: 500px;
background-image: url(img/01.gif);
background-repeat: no-repeat;
background-position:center;
}
.block {
background-size: 70px 70px;
}
background-origin：设置背景绘制的区域
该属性用于设置背景绘制的区域，它的值有以下几种：
border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box：背景绘制在衬距方框内（剪切成衬距方框）。
content-box： 背景绘制在内容方框内（剪切成内容方框）。
div {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: red;
border: 10px dotted black;
}
默认情况下：
背景颜色的覆盖范围从边框开始，同时也是border-box的效果，默认值。
background-clip: padding-box：
背景绘制区域从内边距开始（内边距的最外层就是边框）
background-clip：content-box：
背景区域的绘制将会从内容部分开始
background-origin：指定背景图像的位置区域
? 它的值跟上面的background-clip一样，只不过这个属性针对的是背景图像，上面的background-clip针对的是背景绘制的颜色
background-origin：border-box
background-origin：padding-box:（默认值）
background-origin：content-box
【注意】如盒子没有内边距，那么设置了content-box和padding的效果是一样的。