11 使用CSS3背景属性
在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其它可以从手册中获取帮助。
CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里。多个背景图片的url之间使用逗号隔开即可,如果有多个背景图片,而其他属性只有一个,那么所有背景图片都应用该属性值。
背景大小调整也是CSS3提供的一个新特性,它可以让你随心所欲的控制背景图的尺寸大小。我们知道在CSS2中,背景图的大小在样式中是不可控的,比如要想使得背景图填充满某个区域,你要么重新做帐大点的图,要么就只能让它以平铺的方式来填充。在CSS3中提供了background-size属性, 让你既可以直接缩放背景图来填充满这个区域,也可以让你先给背景图设置大小,然后以设置好的尺寸去平铺满这个区域。background-size需要1个或2个值(1个为必填,1个为可选),这些值既可以是像素px,也可以是百分比%或auto,还可以是特定值cover, contain。
其中background-size第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。background-size的特定值:
cover: 保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域;
contain: 保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的