CSS3 背景
CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。在本章,您将学到以下背景属性:background-sizebackground-origin您也将学到如何使用多重背景图片。
浏览器支持
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
CSS3 background-size 属性
background-size 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
例子 1调整背景图片的大小:
例子 2对背景图片进行拉伸,使其完成填充内容区域:
CSS3 background-origin 属性background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
实例
在 content-box 中定位背景图片:
CSS3 多重背景图片
CSS3 允许您为元素使用多个背景图像。
实例为 body 元素设置两幅背景图片: