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的屬性可以全部處理它們。
這是如下屬性的組合:
背景圖片可以用在絕大部分的HTML元素上而不僅僅是整個(gè)頁(yè)面(body)。簡(jiǎn)單使用但可以獲得良好效果,比如角落的陰影。
注重
示例代碼 [www.hl5o.cn]
body {
background: white url(images/bg.gif) no-repeat top right;
}
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或者像上面的任意組合。
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)。
所以,最佳地使用背景是用在無(wú)內(nèi)容在上的地方,或者使背景圖片比較淡,這也可以減少圖片文件的容量,因?yàn)闆](méi)有更多涉及更多的顏色(假設(shè)你是使用索引顏色的格式,比如GIF)。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
- 克服CSS學(xué)習(xí)障礙 CSS中英文對(duì)照字典
- CSS基礎(chǔ):text-overflow:ellipsis溢出文本顯示省略號(hào)的詳細(xì)方法
- CSS規(guī)范化命名的重要性及三種通用命名規(guī)則
- 列表UL、OL預(yù)設(shè)標(biāo)記在FF與IE下方式不同的試驗(yàn)
- CSS提高網(wǎng)頁(yè)的維護(hù)更新效率
- DivCSS中如何正確的定義CSS偽類(lèi)?
- CSS去除表格的默認(rèn)間距并且制作1px的細(xì)線表
- 標(biāo)簽增加CSS的overflow屬性來(lái)清除浮動(dòng)
- CSS教程:IE中的z-index迷惑(2)
- css教程:CSS填充padding屬性的應(yīng)用
猜你也喜歡看這些
- XHTML入門(mén)學(xué)習(xí)教程:文字格式與特殊字符
- XHTML標(biāo)準(zhǔn)要點(diǎn)詳細(xì)介紹
- HTML表格標(biāo)記教程(26):單元格標(biāo)記
- HTML初級(jí)教程表單form
- HTML5的結(jié)構(gòu)和語(yǔ)義——語(yǔ)義性的塊級(jí)元素(三)
- HTML表單里的Label標(biāo)簽
- HTML表格標(biāo)記教程(16):標(biāo)題水平對(duì)齊屬性ALIGN
- HTML表單標(biāo)記教程(1):
- CSS文件或Web頁(yè)面中度量單位介紹及比較
- HTML表單標(biāo)記教程(3):輸入標(biāo)記
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-CSS中級(jí)教程背景圖片
。