CSS3——背景的设计

1、background-size属性

在CSS3中，可以使用background-size属性来规定背景图片的尺寸，这可以在不同的环境中重复使用背景图片。
相关代码示例：

div{
	background-size: 20px 10px;
}

在最基本的用法中是使用长度单位或者百分比来指定背景的尺寸，其中第一个值是宽度，第二个值高度。如果只设置一个值，则高度默认是auto。

在background-size还有两个可选项：cover和contain。这两个选项都不会造成图像比例失真。其中cover相当于宽度等于元素高度、高度设置auto的情况；而contain则相当于高度等于元素高度、宽度设为auto的情况。

在background-size: contain;中其等效于background-size: 100% auto;
在background-size: cover;中其等效于background-size: auto 100%;

注意：background-size一定要在指定图片后设定，否则不会生效。

2、background-origin属性

background-origin属性指定了图片的起始位置，在正常情况下背景图片是从内边距的左上角开始延展的，而background-origin指定背景图片从哪个位置开始延展。
background-origin的相关属性值为：

• border-box：边框左上角
• padding-box：内边距左上角
• content-box：内容左上角

3、background-clip属性

background-clip属性控制整个元素背景的显示范围。
background-clip相关的属性值为：

• border-box：在边框部分也显示背景
• padding-box：在外边框内显示背景
• content-box：在内容区域显示背景

4、background属性

background简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：

• background-color：规定要使用的背景颜色。
• background-position：规定背景图像的位置。
• background-size：规定背景图片的尺寸。
• background-repeat：规定如何重复背景图像。
• background-origin：规定背景图片的定位区域。
• background-clip：规定背景图片的绘制区域。
• background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。
• background-image：规定要使用的背景图像。
• inherit：规定应该从父元素继承background属性的设置。

如果不设置其中的某个值，也不会出现问题。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且键入的字母也更好。

在CSS3中允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中书写的顺序来定，最先写的背景在最上层，每层图片定义使用英文逗号分隔开。如果出现重叠，那么写在前面的图片会覆盖在最上层。
相关代码示例如下所示：

div{
	background: url(../images/2.jpg) 200px 0 no-repeat,
	url(../images/1.jpg) 10px 0 no-repeat,
	url(../images/3.jpg) 200px 200px no-repeat;
}

从性能方面进行考虑，加载多张图片会增加HTTP请求，并且多张图片的总的大小所占用的内存空间较大，故从性能方面并不推荐使用该方法。