背景:background，把網(wǎng)頁的背景設為圖片
width 寬;
height 高;
background-color 顏色;
background-image:url(路徑);(背景圖默認鋪滿整個容器)
background-repeat:
no-repeat不重復,repeat-x x軸重復,
repeat-y y軸重復,repeat xy都重復(默認是repeat全鋪滿)
background-position：背景圖位置
表達方式
1英文x軸：left center right; y軸：top center bottom
2數(shù)字(x,y) eg:(30px,50px),如果是0px,則px可以省略
3數(shù)字+英文(x,y),用數(shù)字或帶單位的(px % em是單位就可以用);
寫一個值時，第二個值默認為center；默認位置左上
background-attachment:fixed //固定在瀏覽器可視區(qū)域(scroll 可以滾動,默認)
background簡寫
background:color url(路徑) no-repeat center center fixed;
總結(jié)：
1背景不會占用窗口寬高,也不會撐開容器的寬高。(當容器沒有給寬高時,看不到背景圖.)所以用背景圖時一定給容器寬高。(有的標簽有默認寬高的除外)
eg:<p style="background:url(../img/icon.png) no-repeat 0;">你好</p>
//p的寬是屏幕寬,高被字撐開;0即left center-此處沒給寬和高,因為默認有寬高
//默認字和圖片摞到一起---此處理解背景不會占用窗口寬高
2當給無明確寬高的容器加背景時,把容器設為行內(nèi)元素較好。
第一處給span加.
span{font-size:16px;background: url(1.png) no-repeat right 2px;padding-right: 19px;}
第二處也是給span加。
span{background: url(2.png) no-repeat 0;padding-left: 16px;}
原則：
考慮好是給塊元素加還是給行內(nèi)元素加
先讓圖和字摞一起， 然后靠padding擠過去
3如果同時有background-color和background-image,則圖片image永遠比顏色color層級高(即image在上面)
4當圖片做為div背景時,div很小,圖片大,則以div作為可視區(qū)大小---此外理解不會撐開容器寬高
eg:background-repeat與background-position應用
1.background-repeat:repeat-x;background-position:40px 0px;
//40px會往右移動40px,但空出來的部分不會是空白,會把此圖片右半部分截出來40px顯示出來.
2.background-repeat:repeat-x;background-position:center 0;
//圖片放正中間，圖片的前和后該留多少就留多少
3.background-repeat:repeat-y;background-position:0 20px;
//圖片下移20px,空部分會截出該圖的下部分顯示
4.background-repeat:no-repeat;
//position默認是(0px,0px);(-100px,-20px)往左100px,往上20px
