設定背景圖檔初始點
在使用背景圖檔，或許會遇到背景圖檔位置偏移的問題，但其實這是背景圖檔沒設定好初始點引起的問題。
background-origin是css3中引入的元素背景相關的屬性，中文名為背景圖檔起點，他主要是設定背景圖檔位置的起始點。如下所示，不同的初始點，背景圖檔就會有不一樣的位置。
圖檔位置各不一樣
01
文法
控制背景圖檔初始點
backgorund-origin：類型；
這個類型共有三個值可以選：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區域的左上角
那遇到背景圖檔偏移的問題，就知道怎麼回事了！
初始點不同，圖檔位置也不同
知識導圖