4. 多背景圖
CSS3 允許你使用多個(gè)屬性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一個(gè)元素上添加多層背景圖片.
在一個(gè)元素上添加多背景的最簡(jiǎn)單的方法是使用簡(jiǎn)寫(xiě)代碼，你可以指定上面的所有屬性到一條聲明中，只是最常用的還是image, position 和repeat: div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
} 第一個(gè)圖片將是離用戶“最近”的那個(gè)。
該屬性的一個(gè)更復(fù)雜的版本可以是這樣的：
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在這里，(100% 2em) 是background-size 的值；第一個(gè)背景圖片將會(huì)出現(xiàn)在左上角并會(huì)被拉伸至該div的100%寬度和2em的高度。
因?yàn)橹挥猩贁?shù)的瀏覽器支持它，又因?yàn)樵诰W(wǎng)站上不顯示背景有損網(wǎng)站的視覺(jué)效果，所以，這并不是一個(gè)被廣泛應(yīng)用了的屬性。盡管如此，它顯然能夠大大地提高設(shè)計(jì)師的工作流并顯著減少標(biāo)簽數(shù)量——相對(duì)于用其它方式實(shí)現(xiàn)同樣的效果。
瀏覽器支持: 目前，多背景圖片只在Safari/chrome 和Konqueror中有效
擴(kuò)展閱讀：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 多欄布局 下一頁(yè) Word Wrap
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 多背景圖
