css3-background

background-image

background-image:url();
background-image: linear-gradient();
background-image: radial-gradient();
background-image:url(), url();

background-image可以设置线性渐变和镜像渐变。也可以设置多长背景图片。

background-origin

background-origin: bordre-box | padding-box | content-box;

background-origin的默认值为：padding-box;
border-box: 背景图以border的左上角为起点开始平铺。
padding-box: 背景图以padding的左上角为起点开始平铺。
content-box: 背景图以内容区域的左上角为起点开始平铺。
如果设置了background-position，那么此时位置的起点会以background-origin设置的值为准。

border-origin的值只规定了背景图的起点并没有规定背景图的结束的地方。所以即使设置了border-origin属性背景图的右下角依然可以延伸到容器的boder和padding区域。

background-clip

background-clip: padding-box | border-box | content-box | text;

background-clip的默认值为border-box。
padding-box: 背景图不会出现在padding区域以外的地方。
content-box:背景图不会出现在内容区域以外的地方。
text：背景图出现在有文字的地方。
text可以配合下列属性来实现文字分割背景图的效果。下列属性只在webkit内核的浏览器里生效
 -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;

background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat | round | space;

这里主要说一下round和space。
round:  当背景图不能正好填充整个容器，并且容器还能有一张背景图的距离背景图片会进行压缩。当容器不能再放一张背景图时，背景图会拉伸。
space：背景图不会被压缩，当不能正好平铺背景图时，只会以空白部分去填充容器。通过调整空白大小，来平铺背景图。

background-repeat: round space;

只有当属性值为round和space时，backgroun-repeat才可以写两个值。

background-attachment

background-attachment: scroll | local | fixed;

background-attachment的默认值为scroll，表示背景图相当于是有定位的，scroll表示相对于容器进行定位。
local表示相对于内容区域进行定位，如果内容区域滚动，会和内容区域一起滚动。
fixed表示相对于整个视口区域进行定位，但是如果视口区域高度超过容器高度，背景图会被隐藏

bacakground-size

background-size: cover | contain

背景图会先与容器的一条边对齐，然后另一条边等比例缩放，填充整个容器。
cover: 当图背景图按照比例放大后的大小可能会大于容器的大小，可能会溢出容器。
contain： 当背景图按照比例放大后小于等于容器的大小，容器可能会有留白，此时如果background-repeat的值为repeat，背景图会有部分重复。