CSS3對background新加了3個屬性，background-origin、background-clip、background-size,在學習過程中，發現background-origin和background-clip之間可能產生一些化學反應，同時還可能影響background-size的百分比取值，本篇文章將記錄一下對background-origin、background-clip和background-size的基本認識。

在開始使用background-origin和background-clip之前，我們先回顧一下盒子模型。
首先盒子模型是由contentBox、paddingBox、borderBox、marginBox四部分組成。其次CSS盒子模型分為兩種：標準盒模型和怪異盒模型（IE），其中標準盒模型：

盒子的總寬度/高度 = width/height + paddingBox + borderBox + marginBox = contentBox + paddingBox + borderBox + marginBox

而怪異盒模型：

盒子的總寬度/高度 = width/height + marginBox = contentBox + paddingBox + borderBox + marginBox

另外，在CSS3中引入了box-sizing屬性來使開發者根據不同場景規定盒子模型的大小，這一點在移動開發至關重要。

background-clip

clip：剪，剪掉的意思。CSS3中引入background-clip主要是來確定背景的裁剪區域的，也可以理解為背景從盒子模型的那一部分進行展示。
語法：

background-clip: content-box || padding-box || border-box

我們來看一下這幾個取值的具體意思：

• content-box：盒子模型的背景從content部分的外邊緣開始裁剪，使得除了content部分，其以外的背景都不會顯示出來。
• padding-box：盒子模型的背景從padding部分的外邊緣開始裁剪，使得除了padding部分，其以外的背景都不會顯示出來。
• border-box：盒子模型的背景從border部分的外邊緣開始裁剪，使得除了border部分，其以外的背景都不會顯示出來。默認值

上面的文字可能不是很清楚，我們來看幾張圖片：

background-clip不同取值

代碼：

    <!--html-->
    <div class="div7">clip:content-box</div>
    <div class="div8">clip:padding-box</div>
    <div class="div9">clip:border-box</div>

    <!--css-->
    div{
        background: #f00;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px dotted #000;
        margin: 20px;
        display: inline-block;
    }

    .div7{
        background-clip: content-box;
    }
    .div8{
        background-clip: padding-box;
    }
    .div9{
        background-clip: border-box;
    }

再來看看圖片背景的效果：

background-clip不同取值

代碼：

    <!--html-->
    <div class="div7 img">clip:content-box</div>
    <div class="div8 img">clip:padding-box</div>
    <div class="div9 img">clip:border-box</div>
    
    <!--css-->
    div{
        background: #f00;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px dotted #000;
        margin: 20px;
        display: inline-block;
    }
    .img{
        background: url(sourse/day16_img1.jpg) no-repeat;
        color: red;
    }
    .div7{
        background-clip: content-box;
    }
    .div8{
        background-clip: padding-box;
    }
    .div9{
        background-clip: border-box;
        background-origin: border-box;
    }

相信通過上面背景色和圖片的例子，應該很容易可以看出background-clip的作用了，就不過多啰嗦了。
<small style="color:#a7a7a7;">注：圖片背景的例子和背景色的例子中有點不同，在.div9中，圖片的例子多了一句background-origin：border,這是為什么呢？帶著這個問題，在本文的下一個主角background-origin中解答。</small>

關于background-clip上面已經介紹完了，但是在webkit內核的瀏覽器中還有一個關于background-clip好玩的擴展，就是可以給文本設置背景圖片。通過設置background-clip:text，并配合其私有屬性-webkit-text-fill-color: transparent來實現。

background-clip:text

代碼：

    width: 200px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;

webkit總是那么時尚潮流，再比如webkit的box-reflect也是其他瀏覽器實現起來很復雜的小特效。這些webkit的小特效在使用的時候注意兼容性的問題，在Safari、Chorme和最新版的Opera以及Edge上是沒問題的，但是在IE和Firefox就完蛋了。

background-clip使用小例子
Facebook彈出窗口，邊框帶有透明并能顯示底下的內容如下圖所示：

Facebook彈出窗口

    .facebook {
        background: #3B5A98;
        border: 20px solid rgba(134,134,134,0.8);
        padding: 10px;
        color: #fff;
        text-align: center;
        width: 150px;
        height: 65px;
        line-height: 65px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        font: bold 25px Airal;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        -o-background-clip: padding-box;
        background-clip: padding-box;
   }

background-origin

origin：起源，原點的意思，通過它的翻譯我們可以推斷出它的作用是，規定背景的原點，或者說是規定背景在盒子模型中的起始位置（剛學習的時候我也是這樣認為的）。
語法：

background-origin: content-box || padding-box || border-box

我們來看一下這幾個取值的具體意思（暫時）：

• content-box：盒子模型的背景從content部分的左上角開始繪制。
• padding-box：盒子模型的背景從padding部分的左上角開始繪制。默認值
• border-box：盒子模型的背景從border部分的左上角開始繪制。

我們來看幾張圖片對比一下：

background-origin

代碼：

    <!--html-->
    <div class="div2 img">origin：content-box</div>
    <div class="div3 img">origin：padding-box</div>
    <div class="div4 img">origin：border-box</div>

    <!--css-->
    .img{
        background: url(sourse/day16_img1.jpg) no-repeat;
        color: red;
    }
    .div2{
        background-origin: content-box;
    }
    .div3{
        background-origin: padding-box;
    }
    .div4{
        background-origin: border-box;
    }

通過上面的圖片背景，我們好像可以看出背景被background-origin限制繪制起點了，還有一點美中不足就是起點是限制了，但是好像終點并沒有被限制，右下角任然進入了外層的盒子（比如background-origin：content-box，起點是從contentx-box的左上角開始繪制的，但是右下角明顯進入了paddingBox和borderBox），這個問題不急，在下面解釋（好熟悉的趕腳）。

我們再來看一下背景為顏色時候的樣子：

background-origin

代碼：

    <!--html-->
    <div class="div2">origin：content-box</div>
    <div class="div3">origin：padding-box</div>
    <div class="div4">origin：border-box</div>

    <!--css-->
    .div2{
        background-origin: content-box;
    }
    .div3{
        background-origin: padding-box;
    }
    .div4{
        background-origin: border-box;
    }

這就不對了，什么鬼？怎么都一樣，不是設置不同背景起點了嗎?
這就是一開始我提到“剛學習的時候我也是這樣認為的”，但是通過查資料發現，人家CCS3規定的background-origin是用來管圖片起始繪制點的，根本沒有顏色背景的事。
OK，問題解決。還記得我們在background-clip中.div9中添加的哪一個background-origin:border-box嗎？現在應該知道它是干什么的了吧。
還是再解釋一下吧，.div9那個盒子是用來測試background-clip對borderBox的裁剪作用，但是background-clip的默認屬性為paddingBox，不設置一下就看不出上面的效果了，成這樣了：

background

但是通過這個例子我們可以發現一個問題，就是background-origin和background-clip是相互影響的，有時候你但設置其中一個屬性，沒有達到你想要的結果，可能就是另一個的默認屬性（或者你自定義的）影響了。多多去實驗就會發現很多好玩的東西

是不是還有一個問題沒解釋，就是background-origin的這張圖的右下角進入其他盒子的現象。

background-origin

其實我覺著沒必要解釋了。

background-size

在CSS3之前，我們在使用背景圖片的時候會經常遇到下圖中的兩個問題：

background-size

對于這種問題，background-size的出現就是一個福音，它可以讓開發者隨意改變引入的背景圖片的大小。
語法：

background: auto || length || percentage || cover || contain

我們針對這幾個屬性在說明一下：

• auto：此值為默認值，保持背景圖片的原始高度和寬度；

• length：此值設置具體的值，可以改變背景圖片的大??；

• percentage：此值為百分值，可以是0％-100％之間任何值，但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算（個人認為這種說法有些問題）。

• cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小于容器時，又無法使用background-repeat來實現時，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真；

• contain：此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大于元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止，這種方法同樣會使用圖片失真。

• 當background-size取值為length和percentage時可以設置兩個值，也可以設置一個值，當只取一個值時，第二個值相當于auto，但這里的auto并不會使背景圖片的高度保持自己原始高度，而會與第一個值相同。

針對background-size已經有很詳細的使用說明了，懶得做圖片展示了，很好理解，自己去試試就好了。我想強調的是background-size的百分比取值，因為我發現他受background-origin的影響。

background的origin影響size

按照上面對于background-size取百分比值的說法（網上大部分也這樣認為，W3School說的更模糊），是根據圖片所在元素的寬度的百分比來計算的，同時我們文章一開始也說明了盒子模型的總寬度（按標準盒模型）可以寫成:

width + paddingBox + borderBox + marginBox

所以我們可以理解為background-size設置的百分比的值就是上面公式中的width的百分比，如果一個盒子的width固定，background-size固定，豈不是圖片大小就固定了，像下圖這樣：

background-size

    <!--html-->
    <div></div>

    <!--css-->
    div{
        width: 100px;
        background: url(sourse/day16_img1.jpg) no-repeat;
        background-size: 100%;
        height: 100px;
        padding: 20px;
        border: 20px dotted #000;
        margin: 20px;
        display: inline-block;
    }

但是，此時如果我們在設置一下background-origin（clip為默認值），情況就不一樣了。

background-origin: border-box:

background-size

background-size

總結

通過上面的介紹，我們新認識了CSS3的三個屬性background-clip、background-origin、background-size，同時我們發現了他們之間的相互影響。

1. background-clip用來規定背景（顏色和圖片）的展示區域（繪制區域）。
2. background-origin用來規定背景圖片的起始繪制點。
3. background-size用來規定背景圖片的大小。
4. background-origin會影響background-size的百分比取值。
5. 背景屬性可能會相互影響，出現神來之筆的效果，也可能讓你抓狂。

本文參考

http://www.w3cplus.com/content/css-background-origin
http://www.w3cplus.com/content/css3-background-clip
http://www.w3cplus.com/content/css3-background-size
http://www.w3school.com.cn/cssref/pr_background-size.asp