我在講解background-position屬性時引出了背景圖片座標系的應用。當時說背景圖片是相對於座標原點定位的，而這個座標原點就位於border-box區域的左上起點，其實這是不嚴謹的。因為那是預設情況下，而這裡要講解的background-origin屬性就是控制這個座標原點的位置的。

---

Origin有“起源”的意思，而background-origin就有“背景圖片起點”的意思。它是告訴瀏覽器background-position是相對於哪裡定位的。有人會想到background-repeat屬性，當這個屬性設定為非no-repeat時，這時背景圖片就像是孫猴子的猴毛一樣的多，那到底是哪個背景圖片呢。這時你就需要用你的火眼金睛了。我們把設定background-repeat: no-repeat;時顯示的背景圖片稱為元背景圖片，這是它的真身，我們的background-position屬性控制的就是這個真身的位置。

圖片來源於
http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/

---

background-origin的值有：

• border-box

• padding-box（預設值）

• content-box

關於這三個值的解釋，我得引出盒模型這個概念

---

盒模型

在CSS中，元素被看成一盒子。這個盒子被分解成三個部分，即border-box部分、padding-box部分和content-box部分。

在這個網際網路電商時代，相信大家都在網上買過商品吧。當我們欣然的接過快遞小哥送來的包裹時，就會迫不及待的開啟包裹，首先我們會開啟包裝，這個包裝就是border-box區域。如果我們買的東西是易碎品，那麼我們會看到包裹內的防壓泡沫板，這個就是padding-box區域，而在最裡邊的我們的心愛之物就是content-box區域。

在CSS中，border-box區域的大小是由border屬性控制的，padding-box區域的大小是由padding屬性控制的，content-box區域的大小是由實際內容區域大小控制的。

---

回到background-origin這個屬性上來，它的三個值就好理解了。在CSS中頁面的渲染性格是由頁面左上角開始的，那麼

• border-box就是把背景圖片的座標原點設定在盒模型border-box區域的左上角
• padding-box就是把背景圖片的座標原點設定在盒模型padding-box區域的左上角
• content-box就是把背景圖片的座標原點設定在盒模型content-box區域的左上角
  

使用案例：

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

注：南來北往的看官，這裡要注意一下，當background-attachment屬性設定為fixed時，background-origin屬性會失效。