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的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{
    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{
    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;}

颜色透明可参考http://www.jianshu.com/p/b91306268fe2

三种背景的绘制区域，依次是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 !

背 景