3_常見樣式-background

　　
　　一、 background 背景 （複合樣式）

　　如：

background: #f60 url(img/timg.jpg) no-repeat 10px 20px;

       
    二、    background-color 背景顏色

　　　　　　　　可分爲 rgb,關鍵字，十六進制
        
    三、    background-image: url(圖片地址); 背景圖片

　　　　如：

background-image: url(img/timg.jpg);

       
    四、    background-repeat 背景圖是否平鋪

　　　　repeat 平鋪：
       　　　　 repeat-x x方向平鋪

　　　　　　　repeat-y y方向平鋪

　　　　　　　no-repeat y方向平鋪

    五、    background-position 背景定位

       　　關鍵字：
                x方向(默認left)    
                    left（圖的左側和元素左側對齊）     
                    center （圖的中間和元素左側對齊）  
                    right （圖的右側和元素右側對齊）   
                y方向(默認top)    
                     top （圖的頂部和元素頂部對齊）
                     center （圖的中間和元素左側對齊）
                     bottom （圖的底部和元素底部對齊）
            具體數值:
                x方向(默認是0)
                    正值從左向右移動，負值從右向左移動
                y方向(默認是0)             
                    正值從上向下移動，負值從下向上移動
                    
            百分比：   

　　　　　　　圖的百分之N，對齊元素的百分之N   

 

　　六、 background-attachment: scroll;  背景的位置，隨着滾動條移動而移動
           background-attachment: fixed; 固定背景的位置，不隨着滾動條移動而移動

           背景添加了 fixed 座標計算就會根據整個可視區來計算

　　　　如：

background: url(img/bg.jpg) no-repeat 0 0 fixed;
     會在整個頁面左上角開始計算位置。    

    　　背景的原點也就是background-position的 0 ，0 點，或者說left top的位置，默認是在元素padding區域的左上角。

　　七、

　　background-clip 背景裁切：
　　　　　　- background-clip 決定元素的背景，顯示在元素的哪些區域裏(border之內，padding之內，content之內)
　　　　　　- 相關屬性值
  　　　　　　　　  - border-box （默認值）元素背景顯示在border及border以裏
   　　　　　　　　 - padding-box 元素背景顯示在padding及padding以裏
   　　　　　　　　 - content-box 只有content區域顯示元素背景

   　　　　 - -webkit-text  只有文字顯示元素背景
     　　　　　　   -webkit-text是webkit內核的瀏覽器的私有屬性，只有在webkit內核的瀏覽器中才支持
       　　　　　　 - webkit-text新版本的webkit內核的瀏覽器已經不支持了，能夠寫成 -webkit-background-clip: text

　　　　八、

　　　　　　background-origin 背景的原點設置：
　　　　　　background-origin的相關屬性值
　　　　　　　　- border-box：background-position的 0 0點 從元素border的左上角開始計算
　　　　　　　　- padding-box: background-position的 0 0點 從元素padding的左上角開始計算,也是默認值
　　　　　　　　- content-box:  background-position的 0 0點 從元素padding的左上角開始計算

　　　　九、

　　　　　元素多背景圖設置：
　　　　　　　　- 在css3，支持給同一個元素添加多張背景圖，每張背景圖之間須要用","隔開
　　　　　　　　- 當元素擁有多張背景圖時，先寫的在上邊，後加的圖片在下邊
　　　　　　　　- 在集合寫法中，若是隻設置一項border-box的話，瀏覽器默認會把background-origin和background-clip都設置爲border-box
　　　　　　　　- 在集合寫法中，background-origin和background-clip要作不一樣的設置，先寫background-origin的值，再寫裁切的值
　　　　　　　　- 多背景時，若是要添加背景顏色，背景顏色寫在最後邊
十、

　　　　background-size 背景圖大小設置
　　　　　　- 語法：background-size：圖片的寬度 圖片的高度
　　　　　　- 接受的值得類型
    　　　　　　- 具體數值
  　　　　　　  - 百分比

　　　　　　　　　　- 寬度的百分比根據元素的寬度計算　　　　　　　　　　- 高度的百分比根據元素的高度計算    　　　　　　- 關鍵字      　　　　　　　　  - cover    根據元素寬度等比縮放圖片，優先鋪滿整個元素，可是圖片可能會顯示不全       　　　　　　　　 - contain 根據元素寬度等比縮放圖片，優先顯示完整圖片，可是元素可能會鋪不滿      　　　　　　　　  - auto 設置寬度，高度設置auto的話，圖片高度會隨着寬度等比縮放，設置高度，寬度設置auto的話，圖片寬度會隨着高度等比縮放