CSS中級(jí)教程背景圖片_CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

應(yīng)用xhtml css進(jìn)行網(wǎng)頁(yè)布局，有很多屬性跟背景圖片的操作相關(guān)。很多表現(xiàn)因素上的圖片，大部分用背景來(lái)進(jìn)行處理。CSS的background的屬性可以全部處理它們。

示例代碼 [www.hl5o.cn]

body {
background: white url(images/bg.gif) no-repeat top right;
}

這是如下屬性的組合：

示例代碼 [www.hl5o.cn]

background-color，在前面我們已經(jīng)說(shuō)過(guò)了。
background-image，圖片的存儲(chǔ)位置。
background-repeat，圖片如何平鋪。可以是 repeat（將會(huì)平鋪整個(gè)頁(yè)面），repeat-y（在y軸上平鋪，上下）repeat-x （在x軸上平鋪，左右），或者no-repeat（圖片不重復(fù)）。
background-position，可以是top、center、bottom、left、right或者像上面的任意組合。

背景圖片可以用在絕大部分的HTML元素上而不僅僅是整個(gè)頁(yè)面（body）。簡(jiǎn)單使用但可以獲得良好效果，比如角落的陰影。

注重

示例代碼 [www.hl5o.cn]

很輕易對(duì)背景圖片失去控制和把你的網(wǎng)頁(yè)涂得到處都是。一些明顯活躍過(guò)度的人可能認(rèn)為在一個(gè)頁(yè)面的背景鋪上一個(gè)色彩鮮明的圖片看起來(lái)會(huì)很酷，然而卻給用戶判讀前景文本帶來(lái)識(shí)別一個(gè)Ж面的挑戰(zhàn)。這是一個(gè)極端的例子。實(shí)踐中，用戶界面友好的可讀文本是在白色樸素的背景上黑色或者在黑色樸素的背景上的白色（當(dāng)然還有一個(gè)建議：米黃色的背景或淺灰色背景會(huì)更好，因?yàn)闀?huì)減少刺眼的光）。
所以，最佳地使用背景是用在無(wú)內(nèi)容在上的地方，或者使背景圖片比較淡，這也可以減少圖片文件的容量，因?yàn)闆](méi)有更多涉及更多的顏色（假設(shè)你是使用索引顏色的格式，比如GIF）。