background屬性詳解

background是個經常使用的屬性，包含background-color,background-image,background-attachment,background-size,background-repeat,background-origin,background-clip,background-position。。。。，着實有點長。

     1.background-color：背景色，沒啥好說
     2.background-image：背景圖片，經過url()引用，一樣沒啥
     3.background-attachment：設置背景圖片是否隨頁面其餘部分滾動,有fixed(不隨其餘部分滾動),scroll(默認，隨其餘部分滾動),inherit(從父元素繼承background-attachment屬性的設置)
     4.background-size：設置圖片的大小,有length(設置寬度和高度,如20px,20px)，percentage(設置寬度和高度的百分比,10%,20%),cover(覆蓋整個背景區域),contain(將圖片寬高等比例擴大盡可能佔滿整個背景區域)
     5.background-repeat: 定義圖片重複的方式,有repeat(默認，圖片在水平和垂直方向重複)，repeat-x(背景圖像在水平方向重複)，repeat-y(背景圖像在垂直方向重複),no-repeat(背景圖像僅顯示原來的大小),inherit(從父元素繼承)
　　6.background-origin：規定background-position相對於什麼位置來定位，有padding-box(圖片左上角挨着內邊框),border-box(圖片左上角挨着邊框)，content-box(圖片左上角挨着內容)。特別注意:若是背景圖像的 background-attachment 屬性爲 "fixed"，則該屬性沒有效果。
　　7.background-clip：規定背景的繪製區域，有border-box(包含border在內的全部內容)，padding-box(包含padding和content)，content-box(只包含content)

　　8.background-position：設置背景圖像的起始位置。取值有

　　(1)用關鍵詞設置，若只設置了一個值第二個默認爲center。第一個值爲距離頂部位置，第二個值爲距左邊位置。默認爲0%,0%

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

　　(2)用百分比設置，若第二個值未設置默認爲50%.第一個值爲水平位置，第二個爲垂直位置

　　x% y%

　　(3)用具體的值設置，如20px等css單位。值的意義同上

　　xpos ypos