CSS中級教程背景圖片_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
應(yīng)用xhtml css進(jìn)行網(wǎng)頁布局,有很多屬性跟背景圖片的操作相關(guān)。很多表現(xiàn)因素上的圖片,大部分用背景來進(jìn)行處理。CSS的background的屬性可以全部處理它們。
這是如下屬性的組合:
背景圖片可以用在絕大部分的HTML元素上而不僅僅是整個(gè)頁面(body)。簡單使用但可以獲得良好效果,比如角落的陰影。
注重
示例代碼 [m.dounai2.com]
body {
background: white url(images/bg.gif) no-repeat top right;
}
background: white url(images/bg.gif) no-repeat top right;
}
這是如下屬性的組合:
示例代碼 [m.dounai2.com]
background-color,在前面我們已經(jīng)說過了。
background-image,圖片的存儲(chǔ)位置。
background-repeat,圖片如何平鋪。可以是 repeat(將會(huì)平鋪整個(gè)頁面),repeat-y(在y軸上平鋪,上下)repeat-x (在x軸上平鋪,左右),或者no-repeat(圖片不重復(fù))。
background-position,可以是top、center、bottom、left、right或者像上面的任意組合。
background-image,圖片的存儲(chǔ)位置。
background-repeat,圖片如何平鋪。可以是 repeat(將會(huì)平鋪整個(gè)頁面),repeat-y(在y軸上平鋪,上下)repeat-x (在x軸上平鋪,左右),或者no-repeat(圖片不重復(fù))。
background-position,可以是top、center、bottom、left、right或者像上面的任意組合。
背景圖片可以用在絕大部分的HTML元素上而不僅僅是整個(gè)頁面(body)。簡單使用但可以獲得良好效果,比如角落的陰影。
注重
示例代碼 [m.dounai2.com]
很輕易對背景圖片失去控制和把你的網(wǎng)頁涂得到處都是。一些明顯活躍過度的人可能認(rèn)為在一個(gè)頁面的背景鋪上一個(gè)色彩鮮明的圖片看起來會(huì)很酷,然而卻給用戶判讀前景文本帶來識別一個(gè)Ж面的挑戰(zhàn)。這是一個(gè)極端的例子。實(shí)踐中,用戶界面友好的可讀文本是在白色樸素的背景上黑色或者在黑色樸素的背景上的白色(當(dāng)然還有一個(gè)建議:米黃色的背景或淺灰色背景會(huì)更好,因?yàn)闀?huì)減少刺眼的光)。
所以,最佳地使用背景是用在無內(nèi)容在上的地方,或者使背景圖片比較淡,這也可以減少圖片文件的容量,因?yàn)闆]有更多涉及更多的顏色(假設(shè)你是使用索引顏色的格式,比如GIF)。
所以,最佳地使用背景是用在無內(nèi)容在上的地方,或者使背景圖片比較淡,這也可以減少圖片文件的容量,因?yàn)闆]有更多涉及更多的顏色(假設(shè)你是使用索引顏色的格式,比如GIF)。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
- 克服CSS學(xué)習(xí)障礙 CSS中英文對照字典
- CSS基礎(chǔ):text-overflow:ellipsis溢出文本顯示省略號的詳細(xì)方法
- CSS規(guī)范化命名的重要性及三種通用命名規(guī)則
- 列表UL、OL預(yù)設(shè)標(biāo)記在FF與IE下方式不同的試驗(yàn)
- CSS提高網(wǎng)頁的維護(hù)更新效率
- DivCSS中如何正確的定義CSS偽類?
- CSS去除表格的默認(rèn)間距并且制作1px的細(xì)線表
- 標(biāo)簽增加CSS的overflow屬性來清除浮動(dòng)
- CSS教程:IE中的z-index迷惑(2)
- css教程:CSS填充padding屬性的應(yīng)用
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS中級教程背景圖片。