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 元素設置兩幅背景圖片: