CSS3实战之background篇

在CSS3中，background可以添加多个背景图像组，背景图像之间通过逗号进行分隔。

每个背景图像层都可以包含下面的值

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

我们可以将这些属性都写进background属性中，就像这样

body {
    background: url(images/bg3.png) center no-repeat,
                url(images/img15.jpg) center 70% no-repeat;
}

background-origin属性定义background-position属性的参考位置

可以取的值有

border：从边框区域开始显示背景

padding：从补白区域开始显示背景

content：仅在内容区域显示背景

background-clip属性用来判断背景是否包含边框区域

可以取的值有

border：从边框区域向外裁剪背景

padding：从补白区域向外裁剪背景

content：从内容区域向外裁剪背景

no-clip：从边框区域向外裁剪背景

background-size属性可以随心所欲地控制背景图像的显示大小

除了number类型的length和percentage以外，还可以使用

cover：保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景的区域

contain：保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域

如果background-size只设置了一个值，那么第2个值默认为auto