網頁知識：網頁設計：CSS 3背景新屬性background-origin
19712
次閱讀
background-origin是CSS 3背景background的新屬性，主要是用於定位背景圖片的原點位置。 一樣只支援較新的瀏覽器，瀏覽器的支援度，可參考《CSS 3背景新屬性：background-size》，這裡就不再詳細贅述。
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
P.S
次閱讀
CSS 3背景新屬性：background-origin
background-origin: padding-box | border-box | content-boxbackground-origin是CSS 3背景background的新屬性，主要是用於定位背景圖片的原點位置。 一樣只支援較新的瀏覽器，瀏覽器的支援度，可參考《CSS 3背景新屬性：background-size》，這裡就不再詳細贅述。
效果呈現
 |
為了讓呈現效果有明顯的區別，範例中的屬性預設為：width:240px;height:160px;padding:20px;border:10px dashed #E90080;background:#A9E969 url(origin_bg.jpg) no-repeat;
|
background-origin: padding-box;
-moz-background-origin: padding-box; /*for Firefox*/
-webkit-background-origin: padding-box; /*for Google Chrome、Safari*/
-o-background-origin: padding-box; /*for Opera*/
background-origin: padding-box; /*for IE*/
 |
padding-box是background-origin的預設值 背景圖片起點位置為預設內距padding外邊緣 加上background-origin: padding-box後，看起來好像沒有變化，那是因為background-origin: padding-box的背景圖起點位置和background-position : left top的位置是一樣的，所以才會沒有變化。 |
background-origin: border-box;
-moz-background-origin: border-box;
-webkit-background-origin: border-box;
-o-background-origin: border-box;
background-origin: border-box;
 |
背景圖片起點位置從預設padding外邊緣，改變移動至框線boder的外邊緣。 在以前如果要製作同樣的顯示效果，就只能將background-position設為負數值，拿這個範例boder:10px來說，將 background-position:-10px -10px;同樣也能達到一樣的效果。
|
background-origin: content-box;
-moz-background-origin: content-box;
-webkit-background-origin: content-box;
-o-background-origin: content-box;
background-origin: content-box;
 |
背景圖片起點位置從預設padding外邊緣，改變移動至內容content的外邊緣。 在以前如果要製作同樣的顯示效果，可以將內距padding設為background-position的數值，拿這個範例padding:20px來說，將 background-position:20px 20px;同樣也能達到一樣的效果。
|
P.S
- background-origin主要是用來改變背景圖background-position原點位置，只能控制背景圖片，對背景顏色並無作用。
- background-origin只在background-attachment的預設值scroll產生作用，在fixed時，background-origin不產生作用。