CSS3 允許你為一個元素設置多張背景圖片

div{
   width:400px;
   height:400px;
   border:1px solid #000000;         //邊框
   background-image:url(bg1.jpg),url(bg2.jpg);          //背景圖片
   background-position: top left,center right;           //背景位置：第一張圖左上 第二張居中靠右
   background-repeat:no-repeat,no-repet;           //背景平鋪：不平鋪
}

　　效果

簡寫形式：

div{
   width:400px;
   height:400px;
   border:1px solid #000000;         
   background：url（“bg1.jpg”） top left no-repeat，
               url（“bg2.jpg”） center right no-repeat；
}

background-size：

　　　　長度：設置北京圖片高度和寬度，第一個值設置寬度，第二個值設置高度，如果只給出第I個值，　

　　　　　　　第二個是“auto” 自動

　　　　百分比：相對於所在區域的百分比，第一個值設置寬度，第二個值設置高度，如果只給出一個值，

　　　　　　　　第二個值是“auto” 自動

　　　　cover（封面）：保持圖像的長寬比例，並將圖像縮放成剛好完全覆蓋所在區域的最小大小

　　　　contain：保持圖像的長寬比例，並將圖像縮放成剛好完全顯示在所在區域的內的最大大小。

　　Css3允許你為背景圖片定義一個合適的尺寸

　　 當我們為div定義背景圖片的時候，默認情況下 圖片的尺寸可能過大或過小

div{
   width:400px;
   height:400px;
   border:1px solid #000000;         
   background：url（“bg1.jpg”） top left no-repeat，
               url（“bg2.jpg”） center right no-repeat；

    //如果我們給定的圖片是長500 寬500像素的圖片，那麽這個div的背景就不能完全的顯示
    Background-size：400px 400px            //設置背景圖片尺寸和div相同

}

使用簡寫形式：

div{
   width:400px;
   height:400px;
   border:1px solid #000000;         
   background：url（“bg1.jpg”） center/contain no-repeat，
             
}

background-origin:可以定義背景圖片的定位區域

　　padding-box（默認）：

　　border-box：背景圖片以邊框為基本定位

　　content-box：

background-clip：可以定義背景乳片的剪裁區域

　 border-box（默認）：剪裁超出盒子邊框的背景圖片

　　padding-box：剪裁超出盒子內邊距區域的背景圖片

　　content-box：剪裁超出盒子內容區域的背景圖片

背景屬性的簡寫形式

　　background:pink url("bg1.jpg") no-repeat center/contain border-box padding-box ;

　　　　pink:背景顏色

　　　　url：圖片地址

　　　　no-repeat：不平鋪

　　　　圖片位置及尺寸：center contain（以最大大小顯示）

　　　　border-box：背景定位以邊框為基準

　　　　padding-box：背景剪裁以內邊距為基準

Css3 背景