一、background設置一個元素的背景樣式

語法格式：background: color position size repeat origin clip attachment image;

1.background-color：設置元素的背景顏色（默認是透明）

.div{
    height:200px;
    width:200px;
    margin:auto;
    background-color:#eadc32;
    background-color:blue;
    background-color:rgb(0,255,255);
    background-color
 
:rgb(0,255,255,0.4);
}

2.background-position：設置背景圖像的起始位置（默認起始位置開始）

使用background-position與不使用的差別

代碼如下：

.div1{
    height:400px;
    width:400px;
    margin:auto;
    border:2px solid red;
    background-position:top;
    background-position:center top;
    background-position:0,100px;
    background-position
 
:10%,10%;
    background-image:url("1.jpg");
    background-repeat:no-repeat;
}

3.background-size：規定背景圖像的尺寸（默認原尺寸）

語法：background-size: length|percentage|cover|contain;

直接上圖，一目了然

代碼如下：

.div1{
    height:400px;
    width:400px;
    margin:auto;
    border:2px solid red;            
    background-image:url("1.jpg")
 
;
    background-size:75px 75px;
    background-size:50% 50%;
    background-size:75px;
    background-size:50%;
    background-size:cover;
    background-size:contain;
    background-repeat:no-repeat;
}

4.background-repeate:設置是否及如何重復背景圖像(默認repeat)

.div1{
    height:400px;
    width:400px;
    margin:auto;
    border:2px solid red;            
    background-image:url("1.jpg");
    background-repeat:repeat;
    background-repeat:no-repeat;
    background-repeat:repeat-x;
    background-repeat:repeat-y;
}

5.background-origin：背景的參考區域

代碼如下：

.page1{
    height:200px;
    width:400px;
    margin:auto;
    padding:30px;
    border:20px dotted red;
    background-image:url(background.jpg);
    background-repeat:no-repeat;
    background-origin:border-box;
    background-origin:padding-box;
    background-origin:content-box;
} 

6.background-clip：背景的可視區域

background-clip與background-origin的區別與用法見地址：http://www.cnblogs.com/Horsonce/p/7483590.html

7.background-attachment：設置背景圖像是否固定或者隨著頁面的其余部分滾動。（默認是scroll）

body{
    width:100%;
    height:2000px;
    background-image:url(1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-attachment:scroll;
    background-attachment:inherit;
}

二、多背景設置

.div{
     width: 180px;
     height: 180px;
     border: 20px dashed #000;
     background-image: url("img.jpg1"), url("img.jpg2"), url("img.jpg3"), url("img.jpg4");
     background-position: left top, left center, left bottom, center top;
     background-size: 100%;
     background-repeat: no-repeat;
}

【CSS3】css屬性之——background