CSS3 -- 背景原點（background-origin）

一、background-origin 語法、取值

　　CSS3屬性background-origin，主要用來決定背景圖片的定位原點，（即背景圖片定位的起點 --- background-position的原點）。

　　background模型圖（元素默認時的背景圖像原點位置）

元素Background中的background-color原點位置是在Border的外邊緣處；

background-image的原點是在元素的padding外邊緣處（也就是在元素border的內邊緣處）。

-----》
　　background-origin在早期的Webkit和Gecko內核瀏覽器（Firefox3.6-,Safari和Chrome代版本）他們都支持一種老式的語法規則，相似於background-clip在Firefox3.6如下的版本同樣；
　　現代瀏覽器都支持的是一種新的語法。

 （老）、background-origin: padding || border || content  （新）、background-origin: padding-box || border-box || content-box

提示：爲了兼容新老版本的瀏覽器，在使用background-origin改變background-position的原點位置時，最好老舊語法一塊兒加上，而且新語法放在老語法後面，這樣只要是支持新語法規則的瀏覽器就自動會識別background-origin的最新語法。

二、background-origin 兼容 

三、background-origin 用法

兼容寫法：
　　/*Old Webkit and Gecko*/
   -moz-background-origin: padding || border || content;
   -webkit-background-origin: padding || border || content;
   /*New Webkit and Gecko*/
   -moz-background-origin: padding-box || border-box || content-box;
   -webkit-background-origin: padding-box || border-box || content-box;
   /*Presto*/
   -o-background-origin: padding-box || border-box || content-box;
   /*W3c標準*/
   background-origin: padding-box || border-box || content-box;

 

四、background-origin 實例：請點擊查看 http://www.w3cplus.com/content/css-background-origin

 

整理自：（W3CPlus）CSS3 background-origin