background新增的N個強悍功能！

WebKit Origin 快嘴體育 2017-05-17

首先我們先回顧下background的原有樣式：
background-color 背景顏色
- 相關屬性值：
  - 關鍵字：red,blue,yellow等具體的顏色單詞；
  - 十六進制： 0-9，a-f，以“#”開頭的6位十六進制數值表示一種顏色，如#f3e1d2;
  - rgb：分別代表red,green,blue,取值範圍是0-255，如rgb(102,35,210);
    background-image 背景圖片
- 通過url引入圖片鏈接地址；
- 本地相對路徑地址——url(img/img.jpg)；
- 網絡絕對路徑地址——url(http://imgsrc.baidu.com/forum/pic/item/3812b31bb051f819ca6789eadab44aed2f73e7d4.jpg)；附上一張16進製圖片列表，有興趣的朋友可以點開看下；
  background-repeat 背景平鋪
- no-repeat 不平鋪；
- repeat-x 沿著x軸水平平鋪；
- repeat-y 沿著y軸垂直平鋪；
- repeat 默認值，x軸、y軸都平鋪；

background-position 背景定位

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

background-attachment 背景圖滾動

- 相關屬性值
    - scroll 默認值，背景圖隨之滾動條移動；
    - fixed 背景圖固定，不隨滾動條移動；此時座標根據整個可視區計算；

background在CSS3中新增樣式：

background-clip 背景裁切

決定元素的背景顯示在元素的哪個區域裡
具體數值：
- border-box
  - （默認值）元素背景顯示在border及border以內；
- padding-box
  - 元素背景顯示在padding及padding以內；
- content-box
  - 只有content區域顯示元素背景；
- -webkit-text 只有文字區域顯示元素背景；
  - 是weikit內核瀏覽器的私有樣式，只在webkit內核下支持，如chrome，Safari；
  - 新版本的webkit內核已經不支持此樣式，需要寫成-webkit-background-clip: text；
舉例

#box {
    width: 300px;
    height: 300px;
    border: 50px solid rgba(0, 0, 0, .3);
    padding: 50px;
    background: url(img/timg.jpg);
    background-clip: content-box;
    -webkit-background-clip: text；
}

background-origin 背景原點設置

背景的原點默認是在元素padding區域的左上角,即background-position：left top；
相關屬性值
- border-box
  - 背景原點從元素border的左上角開始計算；
- padding-box
  - 背景原點從元素padding的左上角開始計算；
- content-box
  - 背景原點從元素content的左上角開始計算；
舉例

#box {
    width: 300px;
    height: 300px;
    border: 50px solid rgba(0, 0, 0, .3);
    padding: 50px;
    background: url(img/timg.jpg) content-box content-box;
    /*background-clip: content-box;
    background-origin: content-box;*/
    /*複合樣式可以寫到一條裡面，並且，同時有兩個值時，默認第一個是origin，第二個是clip；*/
}

background-size 背景圖尺寸設置

語法：
- background-size：圖片寬度圖片高度；
值的類型：
- 具體數值： px;
- 百分比：
  - 寬度百分比，根據元素寬度計算；
  - 高度百分比，根據元素高度計算；
- 關鍵字：
  - cover 覆蓋
    - 優先鋪滿整個元素，等比縮放圖片，但圖片可能顯示不全；
  - contain 包含
    - 優先顯示完整圖片，等比縮放圖片，但可能鋪不滿整個元素；
  - auto 自動
    - 設置寬度，高度auto時，高度隨著寬度等比縮放；
    - 設置高度，寬度auto時，寬度隨著高度等比縮放；
舉例

#box {
        width: 300px;
        height: 400px;
        border: 1px solid #000;
        overflow: auto;
        resize: both;
        background: url(img/timg.jpg) no-repeat;
        /* background-size: 200px 100px; */
        /* background-size: contain; */
        background-size: 200px auto;
    }

多背景圖設置

在CSS3中支持給同一個元素，添加多張背景圖；
每張背景圖之間，需要用“，”隔開；
先寫的背景圖顯示在上邊，後加的顯示在下邊；
多背景圖時，如果還要添加背景顏色，要把背景顏色加在最後面；
舉例

#box {
    width: 700px;
    height: 200px;
    border: 100px solid rgba(0, 0, 0, 0);
    padding: 100px;
    background: url(img/timg.jpg) no-repeat padding-box, url(img/timg1.jpg) no-repeat border-box padding-box;
}

linear-gradient 線性漸變

漸變顏色設置，或者說過渡點,每個點之間用","隔開 linear-gradient(red,blue,yellow)
過渡點的位置設置
- 百分比
- 具體數值
- 當兩個顏色的過渡點位置是重疊的，顏色和顏色之間就沒有過渡，而是直接跳轉；
漸變方向設置
- 關鍵字設置起點(需要加各個瀏覽器的前綴之後，才能被識別)
舉例

#box {
    width: 300px;
    height: 400px;
    border: 2px solid #000;
    /* background: linear-gradient(red 0%,blue 10%,yellow 30%); */
    background: -webkit-linear-gradient(left top,red 0,blue 20%,yellow 50%);
    background: -moz-linear-gradient(left top,red 0,blue 20%,yellow 50%);
    background: -ms-linear-gradient(left top,red 0,blue 20%,yellow 50%);
    background: linear-gradient(left top,red 0,blue 20%,yellow 50%);
}

角度設置
- 0deg從下向上漸變；
- 默認從上向下漸變；
- 角度增加為順時針旋轉；
repeating-linear-gradient 重複線性漸變
舉例

#box {
    width: 300px;
    height: 100px;
    border: 2px solid #000;
    background: repeating-linear-gradient(90deg, red 0,red 10px,blue 10px, blue 20px, rgba(0, 0, 0, 0) 20px,rgba(0, 0, 0, 0) 30px);
}

漸變屬性 background-image
radial-gradient 徑向漸變
漸變顏色設置，或者說過渡點,每個點之間用","隔開
過渡點的位置設置
- 百分比
- 具體數值
- 當兩個顏色的過渡點位置是重疊的，顏色和顏色之間就沒有過渡，而是直接跳轉
舉例

#box { width: 300px; height: 300px; border: 2px solid #000; background: radial-gradient(closest-side,blue 10%,red 10%, red 95%,blue 95%); }

大小設置
- 具體數值，火狐老版本不支持,以及加了前綴moz依然不支持
- 最近端，最近角，最遠端，最遠角，包含或覆蓋 closest-side, closest-corner, farthest-side, farthest-corner, contain or cover
形狀設置 ellipse||circle
- 形狀設置和大小隻能同時設置一個
圓心點設置
- 必須加前綴才可以設置
- 關鍵字
- 具體數值
舉例

#box {
    width: 300px;
    height: 400px;
    border: 2px solid #000;
    background: -webkit-radial-gradient(10px 100px,farthest-corner, red,blue);
    background: -moz-radial-gradient(10px 100px,farthest-corner, red,blue);
    background: -ms-radial-gradient(10px 100px,farthest-corner, red,blue);
}

repeating-radial-gradient 重複徑向漸變
舉例

#box {
    width: 300px;
    height: 300px;
    border: 2px solid #000；
    background: repeating-radial-gradient(blue 30px,red 60px,red,90px,blue 90px);
}

以上是background在css3中的新增樣式，這些列舉的是比較常用的，在實際工作中經常用到，希望對大家有所幫助！