CSS background-origin屬性

guolulu66發表於2020-10-13

我在講解background-position屬性時引出了背景圖片座標系的應用。當時說背景圖片是相對於座標原點定位的,而這個座標原點就位於border-box區域的左上起點,其實這是不嚴謹的。因為那是預設情況下,而這裡要講解的background-origin屬性就是控制這個座標原點的位置的。


Origin有“起源”的意思,而background-origin就有“背景圖片起點”的意思。它是告訴瀏覽器background-position是相對於哪裡定位的。有人會想到background-repeat屬性,當這個屬性設定為非no-repeat時,這時背景圖片就像是孫猴子的猴毛一樣的多,那到底是哪個背景圖片呢。這時你就需要用你的火眼金睛了。我們把設定background-repeat: no-repeat;時顯示的背景圖片稱為元背景圖片,這是它的真身,我們的background-position屬性控制的就是這個真身的位置。
圖片做了襯托

圖片來源於
http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/


background-origin的值有:

  • border-box

  • padding-box(預設值)

  • content-box

關於這三個值的解釋,我得引出盒模型這個概念


盒模型

在CSS中,元素被看成一盒子。這個盒子被分解成三個部分,即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區域的左上角
    在這裡插入圖片描述

使用案例:

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

注:南來北往的看官,這裡要注意一下,當background-attachment屬性設定為fixed時,background-origin屬性會失效。