background-origin：背景起源

該屬性指定了背景從哪個區域(邊框、補白或內容)開始繪製，但也僅僅能控制背景開始繪製的位置，可以用這個屬性在邊框上繪製背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了。

共有三個屬性值：

border-box：（預設值）背景相對於邊框進行定位；以邊框左上角為起點渲染(效果圖如下)

padding-box：背景相對於padding定位；也可認為從邊框內部左上角開始渲染（如下圖）padding為50px

content-box：背景相對於內容盒定位；

background-clip：背景裁剪

該屬性指定了背景在哪些區域可以顯示，但與背景開始繪製的位置無關，背景的繪製的位置可以出現在不顯示背景的區域，這時就相當於背景圖片被不顯示背景的區域裁剪了一部分一樣。

這裡注意：因為背景圖片預設是從border內部開始渲染，如果單獨設定一個background-clip:border-box;是看不出效果的，需要把背景位置改變background-position:-50px -50px;（效果如下圖）

padding-box:從內邊距開始顯示（預設值）

content-box: 從內容區域開始顯示；padding為50px

以上~