背景顏色屬性(background-color)
這個(gè)屬性為HTML元素設(shè)定背景顏色,相當(dāng)于HTML中bgcolor屬性。
body?{background-color:#99FF00;}
上面的代碼表示Body這個(gè)HTML元素的背景顏色是翠綠色的。
演示示例
背景圖片屬性(background-image)
這個(gè)屬性為HTML元素設(shè)定背景圖片,相當(dāng)于HTML中background屬性。
<body?style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代碼為Body這個(gè)HTML元素設(shè)定了一個(gè)背景圖片。
演示示例
背景重復(fù)屬性(background-repeat)
這個(gè)屬性和background-image屬性連在一起使用,決定背景圖片是否重復(fù)。如果只設(shè)置background-image屬性,沒(méi)設(shè)置background-repeat屬性,在缺省狀態(tài)下,圖片既橫向重復(fù),又豎向重復(fù)。
repeat-x?背景圖片橫向重復(fù)
repeat-y?背景圖片豎向重復(fù)
no-repeat?背景圖片不重復(fù)
body?{background-image:url(../images/css_tutorials/background.jpg);?background-repeat:repeat-y}
上面的代碼表示圖片豎向重復(fù)。
演示示例
背景附著屬性(background-attachment)
這個(gè)屬性和background-image屬性連在一起使用,決定圖片是跟隨內(nèi)容滾動(dòng),還是固定不動(dòng)。這個(gè)屬性有兩個(gè)值,一個(gè)是scroll,一個(gè)是fixed。缺省值是scroll。
body?{background-image:url(../images/css_tutorials/background.jpg);?background-repeat:no-repeat;?background-attachment:fixed}
上面的代碼表示圖片固定不動(dòng),不隨內(nèi)容滾動(dòng)而動(dòng)。
演示示例
背景位置屬性(background-position)
這個(gè)屬性和background-image屬性連在一起使用,決定了背景圖片的最初位置。
body?{background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat;?background-position:20px?60px}
上面的代碼表示背景圖片的初始位置距離網(wǎng)頁(yè)最左面20px,距離網(wǎng)頁(yè)最上面60px。
演示示例
背景屬性(background)
這個(gè)屬性是設(shè)置背景相關(guān)屬性的一種快捷的綜合寫(xiě)法,?包括background-color,?background-image,?background-repeat,?backgroundattachment,?background-position。
body?{background:#99FF00?url(../images/css_tutorials/background.jpg)?no-repeat?fixed?40px?100px}
上面的代碼表示,網(wǎng)頁(yè)的背景顏色是翠綠色,背景圖片是background.jpg圖片,背景圖片不重復(fù)顯示,背景圖片不隨內(nèi)容滾動(dòng)而動(dòng),背景圖片距離網(wǎng)頁(yè)最左面40px,距離網(wǎng)頁(yè)最上面100px。