11 使用CSS3背景属性

在CSS3中提供了多个背景属性，这里只介绍两个比较常用的属性，其它可以从手册中获取帮助。
CSS3的诞生为我们解决了这一问题，在CSS3里，通过background-image或者background可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块元素里。多个背景图片的url之间使用逗号隔开即可，如果有多个背景图片，而其他属性只有一个，那么所有背景图片都应用该属性值。

35.png

背景大小调整也是CSS3提供的一个新特性，它可以让你随心所欲的控制背景图的尺寸大小。我们知道在CSS2中，背景图的大小在样式中是不可控的，比如要想使得背景图填充满某个区域，你要么重新做帐大点的图，要么就只能让它以平铺的方式来填充。在CSS3中提供了background-size属性， 让你既可以直接缩放背景图来填充满这个区域，也可以让你先给背景图设置大小，然后以设置好的尺寸去平铺满这个区域。background-size需要1个或2个值（1个为必填，1个为可选），这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。

36.png

其中background-size第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。background-size的特定值：

cover: 保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；
contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的