前言
CSS3中出現了幾種關於背景圖片的新屬性：background-origin、background-clip、background-position等.之前大致瞭解了下，但是background-origin與background-clip的區別尚不清楚。就google了一篇，發現不錯，翻譯下來吧。
原文連接 : The New Background Position in CSS3
Say Hello to Background-Origin and Background-Clip, CSS3 new features!
ps: 原文在線代碼演示已由codepen.io 搬至runjs.cn
background-position
用css給元素設置背景圖片的每個人都用過background-position屬性，在CSS3之前設置那個位置的值相對於元素的左上角(top，left),例如：
div {background-position: 20px 40px; /* 距左邊20px & 距頂部40px */ }有個問題就是不可能確定相對於其它點的精確位置，例如右下角(bottom, right), 只能以左上角開始。
我們可以寫：background-position: right bottom;或者background-position: 70% /* from left */ 80%/* from top */，但不能寫出距離右端20px和距離底端20px.
使用新的background-position
爲了解決這個問題，CSS3提供了可以定義那個開始的位置和決定原點(0,0)的位置。
工作原理
相對於之前只能賦2個值的情況(相對於left和top的水平和垂直距離)，現在用CSS3我們可以指定那個水平和垂直位置的原點，例如right bottom + 值。
background-position: right 20px bottom 40px
Live Example
同時你也能夠給一個盒子設置多個背景圖片且每個圖片的原點不同。
Live Example
background-origin
在CSS2中，當我們給元素添加background-image時，圖片是以元素padding的左上角開始。
默認的background-origin位置和設置background-position值爲0 left, 0 top一致。我們能夠看到background-image以padding開始的。
Live Example
通過background-origin我們能夠設置背景圖片開始的位置border、padding或content.
- border-box 相對於元素邊界的左上角的(0, 0)
- padding-box(default) 相對於元素padding的左上角
- content-box 相對於元素content的左上角。
Live Example
background-clip
在background-origin例子中可以看到，background-origin的背景圖片覆蓋了元素的border/padding的right/bottom.
使用background-clip可以解決這個問題。使用background-clip我們可以決定裁剪背景圖片的位置，值和background-origin的值相同，不過默認是border-box，不裁剪。
Live Example
從background-origin和background-clip的例子中可以看出，大多少情況下可能需要他們一起配合使用。而且使用這些屬性可以編寫出更nicer的東西，例如：
Live Example
ps:第一次翻譯，勉強能看的懂吧。。。