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

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

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

取值說明：

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

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

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

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

3.實(shí)例：

先給他們創(chuàng)建一個(gè)Demo:

1.background-origin:padding-box

首先來看padding-box的應(yīng)用，在前面的Demo基礎(chǔ)上，給這個(gè)Demo加上background-origin:padding-box，具體如下所示

看到效果后有些人一定會(huì)問，怎么和當(dāng)初效果一樣，沒有任何效果變化呢？細(xì)心的你要是仔細(xì)看了前面的內(nèi)容，你一定不會(huì)這樣問，因?yàn)閜adding-box是background-origin的默認(rèn)值 ，也就是說background-origin:padding-box就是使background-position的起點(diǎn)在”left top”位置處，也是background-position的默認(rèn)值。從而也就沒有任何的變化

2.background-origin:border-box

3.background-origin:content-box

當(dāng)background-origin值為content-box時(shí)，background-position的起點(diǎn)位置就由當(dāng)初的padding外邊緣移動(dòng)到現(xiàn)在content的外邊緣處了，換句話說，background-position由當(dāng)初的(left top)位置變成了現(xiàn)在的(20px 20px)，因?yàn)檫@個(gè)Demo的padding為20px

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。