CSS3 背景

CSS3 背景
CSS3 包含多個(gè)新的背景屬性，它們提供了對背景更強(qiáng)大的控制。

在本章，您將學(xué)到以下背景屬性：

background-size
background-origin
您也將學(xué)到如何使用多重背景圖片。

瀏覽器支持
屬性    瀏覽器支持
background-size                    
background-origin                    
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景屬性。

CSS3 background-size 屬性
background-size 屬性規(guī)定背景圖片的尺寸。

在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們在不同的環(huán)境中重復(fù)使用背景圖片。

您能夠以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸，那么尺寸相對于父元素的寬度和高度。

例子 1
調(diào)整背景圖片的大小：

div { background:url(bg_flower.gif); -moz-background-size:63px 100px; <span class="code_comment">/* 老版本的 Firefox */</span> background-size:63px 100px; background-repeat:no-repeat; }
親自試一試

例子 2
對背景圖片進(jìn)行拉伸，使其完成填充內(nèi)容區(qū)域：

div { background:url(bg_flower.gif); -moz-background-size:40% 100%; <span class="code_comment">/* 老版本的 Firefox */</span> background-size:40% 100%; background-repeat:no-repeat; }
親自試一試

CSS3 background-origin 屬性
background-origin 屬性規(guī)定背景圖片的定位區(qū)域。

背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。

背景圖片的定位區(qū)域
實(shí)例
在 content-box 中定位背景圖片：

div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; <span class="code_comment">/* Safari */</span> background-origin:content-box; }
親自試一試

CSS3 多重背景圖片
CSS3 允許您為元素使用多個(gè)背景圖像。

實(shí)例
為 body 元素設(shè)置兩幅背景圖片：

body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
親自試一試

新的背景屬性
屬性    描述    CSS
background-clip    規(guī)定背景的繪制區(qū)域。    3
background-origin    規(guī)定背景圖片的定位區(qū)域。    3
background-size    規(guī)定背景圖片的尺寸。    3