css背景樣式包含:背景顏色“background-color”、背景圖片“background-image”、背景定位“background-position”、背景重復(fù)“background-repeat”、“background”等。
本教程操作環(huán)境:windows7系統(tǒng)、css3版、dell g3電腦。
1、background-color 設(shè)置元素的背景顏色。
background-color:顏色/transparent
說(shuō)明:
transparent是全透明
顏色值(顏色名/rgb/十六進(jìn)制)
背景區(qū)包括內(nèi)容、內(nèi)邊距(padding)和邊框(border)、不包含外邊距(margin)
2、background-image 設(shè)置元素的背景圖片。
background-image:url(圖片地址)/none
說(shuō)明:
url地址可以是相對(duì)地址也可以是絕對(duì)地址
元素的背景占據(jù)了元素的全部尺寸,包括內(nèi)邊距和邊框,但不包括外邊距
默認(rèn)地,背景圖像位于元素的左上角,并在水平和垂直方向上重復(fù)。
當(dāng)即設(shè)置了背景圖片又設(shè)置了背景顏色時(shí),背景圖片會(huì)覆蓋背景顏色
3、background-position 設(shè)置背景圖片的起始位置,背景定位
background-position :百分比/px/top/right/bottom/left/center
4、background-attachment 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-attachment:scroll/fixed
scroll: 默認(rèn)值,隨著圖片的滾動(dòng)而滾動(dòng)
fixed:當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí),背景圖片不會(huì)移動(dòng)
5、background-repeat 設(shè)置背景圖像是否重復(fù)及如何重復(fù)
background-repeat:repeat/no-repeat/repeat-x/repeat-y //分別是重復(fù)、不重復(fù)、水平重復(fù)、不重復(fù)
6、background 簡(jiǎn)寫屬性,作用是將背景屬性設(shè)置在一個(gè)聲明中。
background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
說(shuō)明:各值之間用空格分割,不分先后順序
(學(xué)習(xí)視頻分享:css視頻教程)