CSS3 background-origin 屬性

CSS3 background-origin 屬性的功能是用來控制背景圖片的位置設定，透過 CSS3 的 background-origin 屬性可以輕易的讓 DIV 區塊的背景圖片根據外邊框（border-box）、內距邊框（padding-box）以及內容邊框（content-box）來定位，讓傳統設置 DIV 背景圖片位置對齊的工作迅速獲得解決，由於 background-origin 屬性屬於 CSS3 較新的功能，部份的瀏覽器要新版的才支援，整理給 CSS 設計師各位參考。

常用瀏覽器對 CSS3 background-origin 屬性的支援情況

瀏覽器	Google Chrome	Mozilla FireFox	Apple Safari	Opera	Internet Explorer
支援版本	最新版已支援	最新版已支援	最新版已支援	最新版已支援	IE9 以上開始支援

接著我們繼續看 background-origin 的語法以及範例

CSS3 background-origin 屬性語法規則

background-origin: 定位設定方式;

CSS3 的 background-origin 屬性共有三種可以選用的定位方式，分別整理如下。

三個可用的設定

定位設定	說明
background-origin:border-box;	背景圖片根據外邊框定位。
background-origin:padding-box;	背景圖片根據內距邊框定位，預設值。
background-origin:content-box;	背景圖片根據內文邊框定位。

讓每一種定位效果可以明顯呈現，最好要有較粗的 border 設定，以下分為三個不同的實際設定效果。

CSS3 background-origin 屬性範例一、使用外邊框（border-box）定位

範例的實際效果

使用 border-box 的定位方式會讓 DIV 區塊的背景圖片靠在外邊框定位，我們特地將範例的 DIV 邊框加粗至 10px，可以看到背景圖片有一部份與 DIV 邊框重疊，那是因為 background-origin:border-box 的效果讓背景圖片強制定位在外邊框切齊。

備註：使用 background-origin 屬性也必須同時使用 background-image 以及 background-repeat 屬性，並將 background-repeat 的屬性值設定為 no-repeat 才能發揮 background-origin 的背景圖片定位效果。

CSS3 background-origin 屬性範例二、使用內距邊框（padding-box）定位

範例的實際效果

範例二使用 background-origin 的 padding-box 定位，將會讓背景圖片根據內距的邊框定位，也就是背景圖片將對齊於 DIV 邊框的內側，很多人會誤以為 padding-box 的定位會根據 DIV 本身的 padding 設定而改變，其實不會，padding-box 只會讓背景圖片根據 DIV 邊框內側定位，隨著 DIV 區塊邊框的粗細而改變位置。padding-box 是 background-origin 屬性的預設值。

CSS3 background-origin 屬性範例三、使用內容邊框（content-box）定位

範例的實際效果

範例三採用的是 background-origin 的 content-box 定位方式，此種設定會讓 DIV 區塊的背景圖片根據＂內容的邊框＂定位，這種定位方式就與 DIV 本身的 padding 設定有關係，padding 設定越多，背景圖片的位置距離 DIV 邊框的距離就會越遠。

備註：background-origin 屬性只有在 background-attachment 設定為 scroll 時有效。

延伸閱讀