Background images
Updates to existing background properties
CSS3扩展了之前已存在的background属性。
background-position
设置背景的起始位置。
在CSS2.1中，background-position 属性接受两个值，如下：
background-position的值 |
描述 |
|---|---|
| top/center/bottom left/center/right | 如果您仅规定了一个关键词，那么第二个值将是"center"。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果仅规定了一个值，另一个值将是 50%。 默认值：0% 0%。 |
| xpos ypos | 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果仅规定了一个值，另一个值将是50%。 |
CSS3中，此属性可以接受四个值，指定一个边，然后是距离此边的距离。
E { background-position: right 10em bottom 50%; }
background-attachment
background-attachment 属性，设置背景图片是否在浏览器窗口中滚动。
background-position的值 |
描述 |
|---|---|
| scroll | 默认值，元素的背景图片不会随元素的滚动条而滚动，但是会随浏览器窗口的滚动条滚动 |
| fixed | 元素的背景图片不会随任何滚动条而滚动 |
| local | CSS3中新增的值，元素的背景图片不仅会随元素的滚动条而滚动，还会随浏览器窗口的滚动条滚动 |
background-repeat
background-repeat 属性设置背景图片在水平和垂直方向如何排列。
CSS3中新增了 space 和 round 两个值。 Safari和Friefox目前还不支持这两个值。
background-repeat的值 |
描述 |
|---|---|
| repeat | 默认，背景图像将在垂直方向和水平方向重复 |
| repeat-x | 在水平方向重复 |
| repeat-y | 在垂直方向重复 |
| no-repeat | 背景图像将仅显示一次 |
space |
背景图片在不被元素clip的情况下的最大重复次数。然后按照这个次数，背景图片均匀分布在元素中。水平和垂直方向均是如此 |
round |
背景图片在元素中显示的最大重复次数，然后按照这个数的约数来显示，并且拉伸铺满元素空间。比如水平方向显示了2.6个图片，那么这个数就是3 |
div {
border: 1px solid gray;
background-image: url(samo.jpg);
background-size: 65px auto;
height: 260px;
float: left;
width: 296px;
margin-left: 30px;
}
.space{ background-repeat: space; }
.round{ background-repeat: round; }
<div class="repeat"></div>
<div class="space"></div>
<div class="round"></div>
尝试手动改变div的width或height，来观察round时显示的图片个数。
background-repeat 还可以同时接受两个属性，第一个值控制水平方向，第二个值控制垂直方向。
E { background-repeat: round space; }
Multiple background images
CSS3允许为同一个元素设置多个背景图片，background-*系列的属性可以接受多个值，除了background-color，此属性只会被设置到最下面那层背景图上，也只接受一个值，即使有多个背景图片。
E { background-image: value, value; }
每一个背景图片都可以设置其他对应的background-*属性。第一个图片在最上层，第二个在下层。
div{
height: 600px;
border: 1px solid;
background-image: url(samo.jpg), url(grass.jpg);
background-position: left center, 0% 0%;
background-size: auto 100px, auto;
background-repeat: no-repeat; /*当一个属性的值少与背景图片的个数，那么这个或这些值会被循环使用*/
}
以上的样式可以用
background 来缩写，等价于：
background: url("samo.jpg") no-repeat left center, url("grass.jpg") no-repeat 0% 0%;
background-size: auto 100px, auto; /* 注意background-size如果写入到缩写属性中，要跟在background-position之后，并用`/`间隔开，后面例子会展示用法*/
如果此时要设置背景颜色，由于background-color 属性只接受一个值，所以只能在最后一个背景图层设置背景颜色，否则属性值非法。
background: url("samo.jpg") no-repeat left center, url("grass.jpg") no-repeat 0% 0% lightblue; /*只能在最后一个图层设置背景颜色*/
background-size: auto 100px, auto;
Dynamically scaled background images
前面的例子已经使用了background-size 属性，他是CSS3新加入的属性，用来设置背景图片的大小。
E { background-size: value; }
E { background-size: width height; }
其属性值可以是一个或一对 长度值/百分比，还可以是一个关键字。
background-size的值 |
描述 |
|---|---|
| length | 第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto" |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
cover |
把背景图像扩展至父元素宽度或高度的最大值。背景图像的部分可能会超过父元素区域 |
contain |
把图像图像扩展至最大尺寸，但是不能超过其父元素的宽度或高度 |
下面来看 cover 和 contain 的区别：
<div class="contain"></div>
<div class="cover"></div>
div{
height: 300px;
width: 200px;
border: 1px solid;
float: left;
margin-left: 20px;
background: url("samo.jpg") no-repeat left center;
}
.contain{background-size: contain}
.cover{background-size: cover}
效果如下图，
左边是 contain 效果，可以看到当图片等比例扩展到高度边界时，还没有到达其宽度边界，但是此时图片不会再扩展了。
右边是 cover 效果，当图片等比例扩展到高度边界时，还没有到达其宽度边界，此时图片仍然会继续扩展，直到不能再扩展(就是到达其宽度边界)了。
Background clip and origin
CSS3提供了两个新的属性：
background-clip 属性规定背景(背景图片或背景颜色)的绘制区域，默认值是 border-box。
background-origin 属性规定** background-position 属性相对于什么位置来定位**，默认值是 padding-box。
他们的属性值相同，都是关键字： border-box, content-box, padding-box
E { background-clip: box; } /*默认值是border-box*/
E { background-origin: box; } /*默认值是padding-box*/
下面来看background-clip 的示例：
<div class="border"></div>
<div class="padding"></div>
<div class="content"></div>
div{
height: 200px;
width: 100px;
border: 1px solid;
float: left;
margin-left: 20px;
background: url("samo.jpg") no-repeat center center / 200px auto; /*background-size紧跟在background-position之后，并用`/`间隔开*/
border: 20px solid rgba(173,216,230,.3); /*这里设置了颜色透明*/
padding: 20px;
}
.border{background-clip: border-box;}
.padding{background-clip: padding-box;}
.content{background-clip: content-box;}
三种背景的绘制区域，依次是border-box, padding-box, content-box
下面来看background-origin 的示例，还使用同样的HMTL，样式修改如下：
div{
height: 200px;
width: 100px;
border: 1px solid;
float: left;
margin-left: 20px;
background: url("samo.jpg") no-repeat left top / 100px auto;
border: 20px solid rgba(173,216,230,.3);
padding: 20px;
}
.border{background-origin: border-box;}
.padding{background-origin: padding-box;}
.content{background-origin: content-box;}
可以看到背景分别从不同的位置开始定位，background-origin 就是用来设置background-position 的起始位置的。
Updated background shortcut
前面提到了background缩写属性，下面来完整总结下：
background: background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip
值都是可选的，background-origin 和 background-clip由于值相同，可以只设置一个值，那么这两个属性就有相同的值，如果设置两个，第一个是background-origin，第二个是background-clip。
还用前面的HMTL，修改样式为如下：
div {
height: 200px;
width: 100px;
border: 1px solid;
float: left;
margin-left: 20px;
border: 20px solid rgba(173, 216, 230, .3);
padding: 20px;
}
.border { background: url("samo.jpg") no-repeat left top / 160px auto content-box; }
.padding { background: url("samo.jpg") no-repeat left top / 160px auto content-box padding-box; }
.content { background: url("samo.jpg") no-repeat left top / 160px auto content-box border-box; }
此文是对《The Book of CSS3 2nd edition》第8章的理解和归纳，方便以后查阅。
感谢其作者Peter Gasston !
