6.2 CSS3中新增的控制网页背景属性

CSS3中新增了一些控制网页背景的属性，下面将详细讲述它们的使用方法和技巧。

6.2.1 案例6——设置背景图片大小

在以前的网页设计中，背景图片的大小是不可以控制的，如果想要图片填充整个背景，则需要事先设计一个较大的背景图片，否则只能让背景图片以平铺的方式来填充页面元素。在CSS3中，新增了一个background-size属性，用来控制背景图片的大小，从而降低网页设计的开发成本。

background-size语法格式如下所示。

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

其参数值含义如表6-4所示。

表6-4 background-size属性参数表

【例6.7】（案例文件：ch06\6.7.html）

在IE 11.0浏览器中浏览效果如图6-9所示，可以看到网页中的背景图片填充了整个页面。

图6-9 设定背景图片大小

同样，也可以用像素或百分比指定背景图片大小显示。当指定为百分比时，其大小会由所在区域的宽度、高度，以及background-size的位置决定。使用示例如下。

background-size:900 800;

此时background-size属性可以设置1个或2个值，1个为必填，1个为选填。其中第1个值用于指定图片宽度，第2个值用于指定图片高度。如果只设定一个值，则第2个值默认为auto。

6.2.2 案例7——设置背景显示区域

在网页设计中，如果能改变背景图片的定位方式，使设计师能够更灵活地决定背景图应该显示的位置，会大大减少设计成本。在CSS3中，新增了一个background-origin属性，用来完成背景图片的定位。

默认情况下，background-position属性总是以元素左上角原点作为背景图像定位，使用background-origin属性可以改变这种定位方式。

background-origin ： border | padding | content

其参数含义如表6-5所示。

表6-5 background-origin参数值

【例6.8】（案例文件：ch06\6.8.html）

在IE 11.0浏览器中浏览效果如图6-10所示，可以看到在网页中，背景图片以指定大小在网页左侧显示，背景图片上显示了相应的段落信息。

图6-10 设置背景显示区域

6.2.3 案例8——设置背景图像裁剪区域

在CSS3中，新增了一个background-clip属性，用来定义背景图片的裁剪区域。background-clip属性和background-origin属性有几分相似，通俗地说，background-clip属性用来判断背景是否包含边框区域，而background-origin属性用来决定background-position属性定位的参考位置。

background-clip语法格式如下所示。

background-clip ：border-box | padding-box | content-box | no-clip

其参数值含义如表6-6所示。

表6-6 background-clip参数值

【例6.9】（案例文件：ch06\6.9.html）

在IE 11.0浏览器中浏览效果如图6-11所示，可以看到网页中，背景图像仅在内容区域内显示。

图6-11 以内容边缘裁剪背景图

6.2.4 案例9——设置背景的复合属性

在CSS3中，background属性依然保持了以前的用法，即综合了以上所有与背景有关的属性（即以background-开头的属性），可以一次性地设定背景样式。格式如下：

其中的属性顺序可以自由调换，并且可以选择设定。对于没有设定的属性，系统会自行为该属性添加默认值。

【例6.10】（案例文件：ch06\6.10.html）

在IE 11.0浏览器中浏览效果如图6-12所示，可以看到网页中，背景以复合方式显示。

图6-12 设置背景的复合属性