1.作用：其實background-origin主要就是用來決定背景圖片的定位原點，換句話說就是背景圖片定位的起點（background-position的原點）

如果你看過了《CSS3 background-clip》一文，你不難發現，元素Background中的background-color原點位置是在Border的外邊緣處，而background-image的原點是在元素的padding外邊緣處（也就是在元素border的內邊緣處），下面一起重新看看在《CSS3 background-clip》中所展示的background模型圖

2.語法： background-origin: padding-box || border-box || content-box

取值說明：

1.padding-box(padding):此值為background-origin的默認值，決定background-position起始位置從padding的外邊緣（border的內邊緣）開始顯示背景圖片

2.border-box(border):此值決定background-position起始位置從border的外邊緣開始顯示背景圖片

3.content-box(content):此值決定background-position起始位置從content的外邊緣（padding的內邊緣）開始顯示背景圖片

注意：background-origin雖然現代瀏覽器都支持，但在不同內核瀏覽器下還是需要帶上其各自的前綴，這樣在實際應用中最好按下面的語法規則書寫，以保證只要支持background-origin的都能正常運行

3.實例：

先給他們創建一個Demo:

1.background-origin:padding-box

首先來看padding-box的應用，在前面的Demo基礎上，給這個Demo加上background-origin:padding-box，具體如下所示

看到效果后有些人一定會問，怎么和當初效果一樣，沒有任何效果變化呢？細心的你要是仔細看了前面的內容，你一定不會這樣問，因為padding-box是background-origin的默認值 ，也就是說background-origin:padding-box就是使background-position的起點在”left top”位置處，也是background-position的默認值。從而也就沒有任何的變化

2.background-origin:border-box

現在效果明顯變化了，背景圖片從剛才的padding外邊緣移動到了border的外邊緣，其實background-position并沒有改變，依舊是left top；但是background-origin把background-position的原點位置改變了，從當初的padding外邊緣移動到了border的外邊緣。在background-origin屬性還沒有出現時，做這樣的效果，都是通過改變background-position的值，就拿這個例子來說吧，我們邊框的20px的大小，那么需要把背景圖片從邊框的外邊緣處開始的話，那只有改變background-position的初始值，也就是變成background-position:-20px -20px;如此一來，background-origin取值為border-box等于把background-position變成了負的邊框寬度

3.background-origin:content-box

當background-origin值為content-box時，background-position的起點位置就由當初的padding外邊緣移動到現在content的外邊緣處了，換句話說，background-position由當初的(left top)位置變成了現在的(20px 20px)，因為這個Demo的padding為20px

總結：background-clip主要是用來控制背景（背景色和背景圖片）的顯示區域，其主要配合background-origin來制作不同的效果；而background-origin主要是用來控制背景圖片的background-position位置，并且其只能控制背景圖片

總結

以上是生活随笔為你收集整理的CSS之background-origin属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。