CSS中級教程 背景圖片

來源:互聯網
上載者:User
應用xhtml+css進行網頁布局,有很多屬性跟背景圖片的操作相關。很多表現因素上的圖片,大部分用背景來進行處理。CSS的background的屬性可以全部處理它們。
body { 
background: white url(images/bg.gif) no-repeat top right; 

這是如下屬性的組合:
background-color,在前面我們已經說過了。
background-image,圖片的儲存位置。
background-repeat,圖片如何平鋪。可以是 repeat(將會平鋪整個頁面),repeat-y(在y軸上平鋪,上下)repeat-x (在x軸上平鋪,左右),或者no-repeat(圖片不重複)。
background-position,可以是top、center、bottom、left、right或者像上面的任意組合。
背景圖片可以用在絕大部分的HTML元素上而不僅僅是整個頁面(body)。簡單使用但可以獲得良好效果,比如角落的陰影。
注意
很容易對背景圖片失去控制和把你的網頁塗得到處都是。一些明顯活躍過度的人可能認為在一個頁面的背景鋪上一個色彩鮮明的圖片看起來會很酷,然而卻給使用者判讀前景文本帶來識別一個Ж面的挑戰。這是一個極端的例子。實踐中,使用者介面友好的可讀文本是在白色樸素的背景上黑色或者在黑色樸素的背景上的白色(當然還有一個建議:米黃色的背景或淺灰色背景會更好,因為會減少刺眼的光)。
所以,最佳地使用背景是用在無內容在上的地方,或者使背景圖片比較淡,這也可以減少圖片檔案的容量,因為沒有更多涉及更多的顏色(假設你是使用索引顏色的格式,比如GIF)。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.