CSS背景属性彻底研究
☆ 背景顏色屬性(background-color)
這個屬性為HTML元素設(shè)定背景顏色，相當(dāng)于HTML中bgcolor屬性。
body {background-color:#99FF00;}
上面的代碼表示Body這個HTML元素的背景顏色是翠綠色的。
☆ 背景圖片屬性(background-image)
這個屬性為HTML元素設(shè)定背景圖片，相當(dāng)于HTML中background屬性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代碼為Body這個HTML元素設(shè)定了一個背景圖片。
☆ 背景重復(fù)屬性(background-repeat)
這個屬性和background-image屬性連在一起使用，決定背景圖片是否重復(fù)。如果只設(shè)置background-image屬性，沒設(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)
這個屬性和background-image屬性連在一起使用，決定圖片是跟隨內(nèi)容滾動，還是固定不動。這個屬性有兩個值，一個是scroll，一個是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代碼表示圖片固定不動，不隨內(nèi)容滾動而動。
☆ 背景位置屬性(background-position)
這個屬性和background-image屬性連在一起使用，決定了背景圖片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代碼表示背景圖片的初始位置距離網(wǎng)頁最左面20px，距離網(wǎng)頁最上面60px。
代碼最后background-position還有兩個選項：top和left。可以單獨使用，也可以象本例一樣組合使用。
top:頂部
bottom:底部
left:左邊
right:右邊
top left:左上角
top right:右上角
right bottom:右下角
left bottom:左下角
☆ 背景屬性(background)
這個屬性是設(shè)置背景相關(guān)屬性的一種快捷的綜合寫法，包括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)頁的背景顏色是翠綠色，背景圖片是background.jpg圖片，背景圖片不重復(fù)顯示，背景圖片不隨內(nèi)容滾動而動，背景圖片距離網(wǎng)頁最左面40px，距離網(wǎng)頁最上面100px。
轉(zhuǎn)載于:https://www.cnblogs.com/coolar/archive/2006/08/16/478879.html
總結(jié)
以上是生活随笔為你收集整理的CSS背景属性彻底研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 23天的单车旅行，从广州到四川，篇首语
- 下一篇： 漂亮表格的CSS定义