CSS背景屬性徹底研究

來源:互聯網
上載者:User

☆ 背景顏色屬性(background-color)
這個屬性為HTML元素設定背景顏色,相當於HTML中bgcolor屬性。
body {background-color:#99FF00;}
上面的代碼錶示Body這個HTML元素的背景顏色是翠綠色的。

☆ 背景圖片屬性(background-image)
這個屬性為HTML元素設定背景圖片,相當於HTML中background屬性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代碼為Body這個HTML元素設定了一個背景圖片。

☆ 背景重複屬性(background-repeat)
這個屬性和background-image屬性連在一起使用,決定背景圖片是否重複。如果只設定background-image屬性,沒設定background-repeat屬性,在預設狀態下,圖片既橫向重複,又豎向重複。
· repeat-x 背景圖片橫向重複
· repeat-y 背景圖片豎向重複
· no-repeat 背景圖片不重複
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代碼錶示圖片豎向重複。

☆ 背景附著屬性(background-attachment)
這個屬性和background-image屬性連在一起使用,決定圖片是跟隨內容滾動,還是固定不動。這個屬性有兩個值,一個是scroll,一個是fixed。預設值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代碼錶示圖片固定不動,不隨內容滾動而動。

☆ 背景位置屬性(background-position)
這個屬性和background-image屬性連在一起使用,決定了背景圖片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代碼錶示背景圖片的初始位置距離網頁最左面20px,距離網頁最上面60px。
代碼最後background-position還有兩個選項:top和left。可以單獨使用,也可以象本例一樣組合使用。
top:頂部
bottom:底部
left:左邊
right:右邊
top left:左上方
top right:右上方
right bottom:右下角
left bottom:左下角

☆ 背景屬性(background)
這個屬性是設定背景相關屬性的一種快捷的綜合寫法,包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代碼錶示,網頁的背景顏色是翠綠色,背景圖片是background.jpg圖片,背景圖片不重複顯示,背景圖片不隨內容滾動而動,背景圖片距離網頁最左面40px,距離網頁最上面100px。

相關文章

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.