toc

Intro

css3中增强了background属性，其值为[,]*。css3中容许使用多个背景图像，之间用逗号分割，表示为一个背景图像层，每个背景图像层中都可包含

[background-image] | [background-color] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] | [background-attachment]

各自的意思为：

• background-image：定义背景图片。
• background-color：定义背景颜色。
• background-origin：定义背景的显示区域。
• background-clip：指定背景的裁剪区域。
• background-repeat：设置背景图像是否以及如何重复铺排。
• background-size：设置背景图片的大小。
• background-position：设置背景图片的位置。
• background-attachment：设置背景图像的显示方式。

css3中新增的background子属性为background-origin，background-clip和background-size，查看demo。

一，定义背景图的坐标原点——background-origin

在默认情况下background-position属性总是以左上角为坐标原点进行背景定位。而background-origin属性可以改变这种定位的方式。

background-origin的值有:

• border-box：从边框区域开始显示背景。
• padding-box：从内边距开始显示背景，默认值。
• content-box：仅在内容区域显示背景。

注意，对于background-origin属性，css3规范有过变化，之前background-origin的值为border，padding和content，因此有些早期的文章或者书籍中介绍此属性都用得是老的值，经过测试最新版本的浏览器（chrome，和ff）对两种值的支持不一样（如下图）或查看demo。

由图可知，两个浏览器都支持标准写法border-box（对于background-origin:border的写法两个浏览器均已不支持），chrome的私有属性下border值仍然支持，ff的新版已经放弃使用私有属性，因此-moz-background-origin:border;在新版本的浏览器中已经失效，对于下面background-clip值亦是如此。

因此安全的做法是两种值，和浏览器私有前缀均写上。

下面是其他两个值的浏览器（注意图中文字图片和边框的位置）呈现：

二，定义背景图的裁切方式——css3中background-clip。

background-clip定义了背景图的裁切区域，与background-origin的值相同。

• no-clip：从边框向外裁切。
• border-box：从边框向外裁切。
• padding-box：从内边距裁切。
• content-box：从内容区域开始裁切。

background-clip和background-origin的属性相同，前者定义的是背景图的裁切后者是背景图的定位，若背景图从边框处就开始（origin），但是将内容区域以外的区域裁切（clip），则其最终的浏览器呈现为：

三，定义背景图的大小——background-size

css3属性background-size定义了背景图的显示大小，值有两个，第一个指定了背景图的宽度，第二个指定了背景图的高度，若只有一个，则默认第二个值为auto，background-size可选的值有：

• ，长度值，不可为负值。
• ，百分值，不可为负。
• cover，指保持背景图片本身的长宽比例，将图片缩放到正好覆盖所定义背景的区域。
• contain：指保持背景图片本身的长宽比，见图片缩放到宽度或者高度整好适应所定义背景区域。

background-size的属性很容易理解，如图示不同值下的浏览器呈现（图中例子的属性依次为：100px 180px | 100px | cover | contain）：