CSS3-背景

1、background-origin

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

注：1、背景图像的background-attachment为fixed时，此属性无效。
2、背景图像的background-repeat不为no-repeat时无效

兼容性

ie9+,ff4+,opera,chrome,Safari 5+支持

2、background-clip

用于裁剪背景图片

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

no-clip表示不裁剪。
其余的表示以哪种方式向内裁剪:border-box以border为边界裁剪，padding-box以padding为边界裁剪，content-box以content为边界裁剪

3、background-size

设置背景图片的大小，以长度或者百分比显示

background-size: auto | <长度值> | <百分比> | cover | contain;

auto 默认值，不改变。
长度值：成对出现，如10px 20px。当只设置一个值时，将其作为图片的宽度来等比缩放。
百分比：0~100%，缩放，成对出现，若为一个时遵循长度相同规则。
cover: 覆盖，将图片等比缩放填满整个容器。
contain： 容纳，等比缩放宽高，直至某一边被填满。

4、多重背景

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以将同样的拆分开来

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;