WEB前端--背景相關知識點總結

1、背景(background)

它是單一屬性

可是它衍生出不少的複合屬性

background-color　　　　　  背景色

background-image　　　　　背景圖片

background-repeat　　　　  背景圖片是否重複

background-position　　　　背景圖片位置

background-attachment　　背景圖片是否滾動

 

一、背景顏色

內容能夠把容器的寬高撐開　　背景不會佔用內容的寬高　　背景色會鋪滿整個容器　　transparent背景透明(默認)

二、背景圖片

background-image　　url(圖片地址)

三、背景平鋪

background-repeat:　　背景圖是否平鋪

no-repeat　　不平鋪

repeat-x　　  橫向平鋪

repeat-y　　　縱向平鋪

repeat　　　　所有平鋪(默認值)

四、背景圖片的位置

background-positon:x y

傳數值　　　　表明背景圖片離容器左上角的距離

x

　　負值　　從容器的左邊往左邊走的距離

y

　　正值　　從容器的上邊往下邊走的距離

　　負值　　從容器的上邊往上邊走的距離

傳關鍵字

x

　　left　　圖片的左邊　　center　　圖片在容器x軸的中心　　right　　圖片在容器的右邊

y

　　top　　圖片的上邊　　center　　圖片在容器y軸的中心　　bottom　　圖片在容器的下邊

注意：

　　若是隻傳一個值　　另外一個值默認爲center

　　若是都不傳　　默認爲左上角

 

 

五、background-attachment　　背景圖片是否滾動

scroll　　跟隨滾動條滾動（默認）　　fixed　　不會跟隨滾動條滾動

 

 

六、background的複合樣式：