Origin有“起源”的意思斧账，而background-origin就有“背景圖片起點(diǎn)”的意思实蔽。它是告訴瀏覽器background-position是相對于哪里定位的。
background-origin的值有：
????border-box
????padding-box（默認(rèn)值）
????content-box
關(guān)于這三個屬性的的解釋，首先讓我們先來熟悉一哈盒模型吧Ｎ蝰谩Ｏ淦纭矾飞！
在CSS中，元素被看成一盒子呀邢。這個盒子被分解成三個部分洒沦，即border-box部分、padding-box部分和content-box部分价淌。
在這個互聯(lián)網(wǎng)電商時代申眼，相信大家都在網(wǎng)上買過商品吧。當(dāng)我們欣然的接過快遞小哥送來的包裹時蝉衣，就會迫不及待的打開包裹括尸，首先我們會打開包裝，這個包裝就是border-box區(qū)域病毡。如果我們買的東西是易碎品濒翻，那么我們會看到包裹內(nèi)的防壓泡沫板，這個就是padding-box區(qū)域剪验，而在最里邊的我們的心愛之物就是content-box區(qū)域肴焊。
在CSS中，border-box區(qū)域的大小是由border屬性控制的功戚，padding-box區(qū)域的大小是由padding屬性控制的娶眷，content-box區(qū)域的大小是由實(shí)際內(nèi)容區(qū)域大小控制的。
現(xiàn)在讓我們回到background-origin這個屬性上來啸臀，它的三個值就好理解了届宠。在CSS中頁面的渲染性格是由頁面左上角開始的烁落，那么
border-box就是把背景圖片的坐標(biāo)原點(diǎn)設(shè)置在盒模型border-box區(qū)域的左上角
padding-box就是把背景圖片的坐標(biāo)原點(diǎn)設(shè)置在盒模型padding-box區(qū)域的左上角
content-box就是把背景圖片的坐標(biāo)原點(diǎn)設(shè)置在盒模型content-box區(qū)域的左上角
備注：當(dāng)background-attachment屬性設(shè)置為fixed時，background-origin屬性會失效豌注。
原文鏈接：https://blog.csdn.net/weixin_39256994/article/details/78698145
