4. 多背景圖
CSS3 允許你使用多個(gè)屬性比如background-image、 background-repeat, background-size, background-position, background-origin and background-clip等在一個(gè)元素上添加多層背景圖片.
在一個(gè)元素上添加多背景的最簡(jiǎn)單的方法是使用簡(jiǎn)寫代碼，你可以指定上面的所有屬性到一條聲明中，只是最常用的還是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ò)展閱讀：
5. Word Wrap
word-wrap 屬性用來(lái)防止太長(zhǎng)的字符串溢出的�？梢杂脙蓚�(gè)屬性值normal 和break-word。normal 值(默認(rèn)的) 只在允許的斷點(diǎn)截?cái)辔淖�，如連字符。如果使用了break-word ，文字可以在任何需要的地方截?cái)嘁云ヅ浞峙涞目臻g并防止溢出。
WordPress 后臺(tái)在數(shù)據(jù)表中使用了word-wrap.
在WordPress 的控制面板中，word-wrap 屬性被用于表格中的元素；比如在日志和頁(yè)面的列表中： .widefat * {
word-wrap: break-word;
}
瀏覽器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 將在3.5版本中支持它。
擴(kuò)展閱讀：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [5] 下一頁(yè) 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [7]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 6 頁(yè) 用CSS3將你的設(shè)計(jì)帶入下個(gè)高度 [6]
