CSS3 背景
CSS3 包含多個新的背景屬性，它們提供了對背景更強(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 之前，背景圖片的尺寸是由圖片的實際尺寸決定的耙册。在 CSS3 中给僵，可以規(guī)定背景圖片的尺寸，這就允許我們在不同的環(huán)境中重復(fù)使用背景圖片详拙。
您能夠以像素或百分比規(guī)定尺寸帝际。如果以百分比規(guī)定尺寸，那么尺寸相對于父元素的寬度和高度饶辙。
例子 1
調(diào)整背景圖片的大卸拙鳌：
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
代碼：
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
上面是縮小的背景圖片。
原始圖片：
例子 2
對背景圖片進(jìn)行拉伸弃揽，使其完成填充內(nèi)容區(qū)域：
div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}
代碼：
div
{
background:url(/i/bg_flower.gif);
background-size:35% 100%;
-moz-background-size:35% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;
}
這是一個段落脯爪。
這是一個段落珊佣。
這是一個段落。
這是一個段落披粟。
這是一個段落咒锻。
這是一個段落。
這是一個段落守屉。
這是一個段落惑艇。
這是一個段落。
CSS3 background-origin 屬性
background-origin 屬性規(guī)定背景圖片的定位區(qū)域拇泛。
背景圖片可以放置于 content-box滨巴、padding-box 或 border-box 區(qū)域。
背景圖片的定位區(qū)域
實例
在 content-box 中定位背景圖片：
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
例子：
div
{
border:1px solid black;
padding:35px;
background-image:url('/i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
background-origin:border-box:
這是文本俺叭。這是文本恭取。這是文本。這是文本熄守。這是文本蜈垮。這是文本。這是文本裕照。這是文本攒发。這是文本。這是文本晋南。這是文本惠猿。這是文本。這是文本负间。這是文本偶妖。這是文本。這是文本政溃。這是文本趾访。這是文本。這是文本玩祟。這是文本腹缩。這是文本屿聋。這是文本空扎。這是文本。這是文本润讥。這是文本转锈。這是文本。這是文本楚殿。這是文本撮慨。這是文本。這是文本。這是文本砌溺。這是文本影涉。這是文本。這是文本规伐。這是文本蟹倾。這是文本。
background-origin:content-box:
這是文本猖闪。這是文本鲜棠。這是文本。這是文本培慌。這是文本豁陆。這是文本。這是文本吵护。這是文本盒音。這是文本。這是文本馅而。這是文本里逆。這是文本。這是文本用爪。這是文本原押。這是文本。這是文本偎血。這是文本诸衔。這是文本。這是文本颇玷。這是文本笨农。這是文本。這是文本帖渠。這是文本谒亦。這是文本。這是文本空郊。這是文本份招。這是文本。這是文本狞甚。這是文本锁摔。這是文本。這是文本哼审。這是文本谐腰。這是文本孕豹。這是文本。這是文本十气。這是文本励背。
CSS3 多重背景圖片
CSS3 允許您為元素使用多個背景圖像。
實例
為 body 元素設(shè)置兩幅背景圖片：
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
例子：
body
{
background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);
}
新的背景屬性
屬性 ? ?描述 ? ?CSS
background-clip ? ?規(guī)定背景的繪制區(qū)域砸西。 ? ?3
background-origin ? ?規(guī)定背景圖片的定位區(qū)域椅野。 ? ?3
background-size ? ?規(guī)定背景圖片的尺寸。 ? ?3
