CSS3對background新加了3個屬性锣光，background-origin、background-clip铝耻、background-size,在學(xué)習(xí)過程中誊爹，發(fā)現(xiàn)background-origin和background-clip之間可能產(chǎn)生一些化學(xué)反應(yīng)蹬刷，同時還可能影響background-size的百分比取值，本篇文章將記錄一下對background-origin频丘、background-clip和background-size的基本認(rèn)識办成。
在開始使用background-origin和background-clip之前，我們先回顧一下盒子模型搂漠。
首先盒子模型是由contentBox迂卢、paddingBox、borderBox桐汤、marginBox四部分組成而克。其次CSS盒子模型分為兩種：標(biāo)準(zhǔn)盒模型和怪異盒模型（IE），其中標(biāo)準(zhǔn)盒模型：
盒子的總寬度/高度 = width/height + paddingBox + borderBox + marginBox = contentBox + paddingBox + borderBox + marginBox
而怪異盒模型：
盒子的總寬度/高度 = width/height + marginBox = contentBox + paddingBox + borderBox + marginBox
另外怔毛，在CSS3中引入了box-sizing屬性來使開發(fā)者根據(jù)不同場景規(guī)定盒子模型的大小拍摇，這一點在移動開發(fā)至關(guān)重要。
background-clip
clip：剪馆截，剪掉的意思。CSS3中引入background-clip主要是來確定背景的裁剪區(qū)域的蜂莉，也可以理解為背景從盒子模型的那一部分進行展示蜡娶。
語法：
background-clip: content-box || padding-box || border-box
我們來看一下這幾個取值的具體意思：
- content-box：盒子模型的背景從content部分的外邊緣開始裁剪，使得除了content部分映穗，其以外的背景都不會顯示出來窖张。
- padding-box：盒子模型的背景從padding部分的外邊緣開始裁剪，使得除了padding部分蚁滋，其以外的背景都不會顯示出來宿接。
- border-box：盒子模型的背景從border部分的外邊緣開始裁剪，使得除了border部分辕录，其以外的背景都不會顯示出來睦霎。默認(rèn)值
上面的文字可能不是很清楚，我們來看幾張圖片：
代碼：
<!--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;
}
再來看看圖片背景的效果：
代碼：
<!--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;
}
相信通過上面背景色和圖片的例子走诞，應(yīng)該很容易可以看出background-clip的作用了副女，就不過多啰嗦了。
<small style="color:#a7a7a7;">注：圖片背景的例子和背景色的例子中有點不同蚣旱，在.div9中碑幅，圖片的例子多了一句background-origin：border,這是為什么呢？帶著這個問題塞绿，在本文的下一個主角background-origin中解答沟涨。</small>
關(guān)于background-clip上面已經(jīng)介紹完了，但是在webkit內(nèi)核的瀏覽器中還有一個關(guān)于background-clip好玩的擴展异吻，就是可以給文本設(shè)置背景圖片裹赴。通過設(shè)置background-clip:text，并配合其私有屬性-webkit-text-fill-color: transparent來實現(xiàn)。
代碼：
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也是其他瀏覽器實現(xiàn)起來很復(fù)雜的小特效赋荆。這些webkit的小特效在使用的時候注意兼容性的問題，在Safari懊昨、Chorme和最新版的Opera以及Edge上是沒問題的窄潭，但是在IE和Firefox就完蛋了。
background-clip使用小例子
Facebook彈出窗口酵颁，邊框帶有透明并能顯示底下的內(nèi)容如下圖所示：
平時我們制作這樣的效果都是靠給彈出層的背景加上opacity屬性嫉你，并設(shè)置一定的padding，但大家都知道opacity會直接影響到其子元素的效果躏惋。
現(xiàn)在我們完全可以使用background-clip把元素背景控制在padding或content區(qū)域內(nèi)幽污，這樣一來，只需一個盒子簿姨。我們在這個盒子上加上透明邊框距误，并配合background-clip把背景超過padding或content的邊緣外的背景色直接裁剪掉,具體CSS代碼如下：
.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：起源，原點的意思扁位，通過它的翻譯我們可以推斷出它的作用是准潭，規(guī)定背景的原點，或者說是規(guī)定背景在盒子模型中的起始位置（剛學(xué)習(xí)的時候我也是這樣認(rèn)為的）域仇。
語法：
background-origin: content-box || padding-box || border-box
我們來看一下這幾個取值的具體意思（暫時）：
- content-box：盒子模型的背景從content部分的左上角開始繪制刑然。
- padding-box：盒子模型的背景從padding部分的左上角開始繪制。默認(rèn)值
- border-box：盒子模型的背景從border部分的左上角開始繪制暇务。
我們來看幾張圖片對比一下：
代碼：
<!--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）沐鼠，這個問題不急，在下面解釋（好熟悉的趕腳）叹谁。
我們再來看一下背景為顏色時候的樣子：
代碼：
<!--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;
}
這就不對了饲梭，什么鬼？怎么都一樣焰檩，不是設(shè)置不同背景起點了嗎?
這就是一開始我提到“剛學(xué)習(xí)的時候我也是這樣認(rèn)為的”憔涉，但是通過查資料發(fā)現(xiàn)，人家CCS3規(guī)定的background-origin是用來管圖片起始繪制點的析苫，根本沒有顏色背景的事兜叨。
OK穿扳，問題解決。還記得我們在background-clip中.div9中添加的哪一個background-origin:border-box嗎国旷？現(xiàn)在應(yīng)該知道它是干什么的了吧矛物。
還是再解釋一下吧，.div9那個盒子是用來測試background-clip對borderBox的裁剪作用跪但，但是background-clip的默認(rèn)屬性為paddingBox履羞，不設(shè)置一下就看不出上面的效果了，成這樣了：
看到這樣的圖屡久，根本就無法說明background-clip的作用了忆首。
但是通過這個例子我們可以發(fā)現(xiàn)一個問題，就是background-origin和background-clip是相互影響的被环，有時候你但設(shè)置其中一個屬性糙及，沒有達到你想要的結(jié)果，可能就是另一個的默認(rèn)屬性（或者你自定義的）影響了筛欢。多多去實驗就會發(fā)現(xiàn)很多好玩的東西
是不是還有一個問題沒解釋浸锨，就是background-origin的這張圖的右下角進入其他盒子的現(xiàn)象。
其實我覺著沒必要解釋了版姑。
background-size
在CSS3之前揣钦，我們在使用背景圖片的時候會經(jīng)常遇到下圖中的兩個問題：
對于這種問題，background-size的出現(xiàn)就是一個福音漠酿，它可以讓開發(fā)者隨意改變引入的背景圖片的大小。
語法：
background: auto || length || percentage || cover || contain
我們針對這幾個屬性在說明一下：
auto：此值為默認(rèn)值谎亩，保持背景圖片的原始高度和寬度炒嘲；
length：此值設(shè)置具體的值，可以改變背景圖片的大行偻ァ夫凸；
percentage：此值為百分值，可以是0％-100％之間任何值阱持，但此值只能應(yīng)用在塊元素上夭拌，所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來計算（個人認(rèn)為這種說法有些問題）。
cover：此值是將圖片放大衷咽，以適合鋪滿整個容器鸽扁，這個主要運用在，當(dāng)圖片小于容器時镶骗，又無法使用background-repeat來實現(xiàn)時桶现，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真鼎姊；
contain：此值剛好與cover相反骡和，其主要是將背景圖片縮小相赁，以適合鋪滿整個容器，這個主要運用在慰于，當(dāng)背景圖片大于元素容器時钮科，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止婆赠，這種方法同樣會使用圖片失真绵脯。
當(dāng)background-size取值為length和percentage時可以設(shè)置兩個值，也可以設(shè)置一個值页藻，當(dāng)只取一個值時桨嫁，第二個值相當(dāng)于auto，但這里的auto并不會使背景圖片的高度保持自己原始高度份帐，而會與第一個值相同璃吧。
針對background-size已經(jīng)有很詳細的使用說明了，懶得做圖片展示了废境，很好理解畜挨，自己去試試就好了。我想強調(diào)的是background-size的百分比取值噩凹，因為我發(fā)現(xiàn)他受background-origin的影響巴元。
background的origin影響size
按照上面對于background-size取百分比值的說法（網(wǎng)上大部分也這樣認(rèn)為，W3School說的更模糊）驮宴，是根據(jù)圖片所在元素的寬度的百分比來計算的逮刨，同時我們文章一開始也說明了盒子模型的總寬度（按標(biāo)準(zhǔn)盒模型）可以寫成:
width + paddingBox + borderBox + marginBox
所以我們可以理解為background-size設(shè)置的百分比的值就是上面公式中的width的百分比，如果一個盒子的width固定堵泽，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;
}
但是迎罗，此時如果我們在設(shè)置一下background-origin（clip為默認(rèn)值）睬愤，情況就不一樣了。
background-origin: border-box:
background-origin: content-box:
很明顯圖片的大小改變了纹安，所以我認(rèn)為尤辱，background-size百分比取值會受background-origin影響。
可能還有人會認(rèn)為厢岂，我這是不是設(shè)置background-clip也會影響光督？回答是肯定的，只不過clip影響的是顯示區(qū)域塔粒，圖片大小并沒有改變可帽。
總結(jié)
通過上面的介紹，我們新認(rèn)識了CSS3的三個屬性background-clip窗怒、background-origin映跟、background-size蓄拣，同時我們發(fā)現(xiàn)了他們之間的相互影響。
- background-clip用來規(guī)定背景（顏色和圖片）的展示區(qū)域（繪制區(qū)域）努隙。
- background-origin用來規(guī)定背景圖片的起始繪制點球恤。
- background-size用來規(guī)定背景圖片的大小。
- background-origin會影響background-size的百分比取值荸镊。
- 背景屬性可能會相互影響咽斧，出現(xiàn)神來之筆的效果，也可能讓你抓狂躬存。
本文參考
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
