在CSS3 中可以設定多個背景圖片
類似於下面這種
background-image: url("images/bg3.png"),url("images/bg2.png"),url("images/bg1.jpg");
中間使用","隔開

我想使用背景的其他屬性怎麼給..每一個背景設定相關樣式呢....
同樣使用","隔開
background-repeat: no-repeat;
background-size: 500px,250px,100%;/*寫三個值,中間使用","隔開,就是設定三個背景的樣式了*/
background-position:600px 20px,50px 300px,top left;


測試程式碼(確實是可以同時寫多個的)
<style>
        div{
            width: 100%;
            height: 700px;
            /*注意疊放順序,可以單獨寫,也可以合併寫*/
            background: url("images/bg2.png") no-repeat 0px 200px,url("images/bg3.png") no-repeat 800px 150px,url("images/bg1.jpg") no-repeat 0px 0px ;
        }
    </style>
<div></div>



設定內邊距,測試背景填充範圍和參考物件(感覺基本不會用)
    padding: 50px;
    background-clip: content-box;
    background-origin: content-box;

相關筆記
背景相關
背景
1.背景色 background-color:顏色值，transparent
會填充內容，內邊距，邊框。。。
2.背景影象
background-image:
取值：url(路徑)，
4.背景重複！important
background-repeat:
取值：
repeat :垂直，水平，雙方向重複；
repeat-x;
repeat-y:
no-repeat:不重複；
5.背景圖尺寸，儘量少改
background-size:
取值：
value1 value:背景圖寬，高。
value%  value%:百分比；
cover:覆蓋，影象上，左，下，與邊框重合就行。也屬於縮放。
contain:包含。必須全包含，以框為限制。屬於縮放。
6.背景影象固定
background-attachment:
取值：
scroll:預設：
fixed：固定；
7.背景定位!important
background-position:
取值：
x y;用空格區分。x,y的偏移位置。可以是負值（超出部分不顯示）。
x% y%：相對量。
left|right|center|top|bottom  自由組合。




7.背景裁減
background-clip:
取值：
border-box:包含邊框
padding-box：
content-box:
8.背景的定位區域(圖還是完整的圖)
background-origin
取值：
border-box:包含邊框
padding-box：
content-box:
9.背景綜合屬性：
background:color url() repeat attachment position;
常用用法:第二種最多
background:#eeff00;
background:url() no-repeat 222px 333px;


背景屬性到此結束
----------------------------------------------------------------