選單 Menu
計數器 Counter
TODAY : 307307307
YESTERDAY : 356356356
TOTAL : 1314555131455513145551314555131455513145551314555
網頁知識 : 網頁設計:CSS 3背景新屬性background-origin
作者 設計師 於 2012年02月01日 15:29:24 (11181 次閱讀)

CSS 3背景新屬性:background-origin

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

background-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;
/*背景顏色綠色,並加上背景圖片,框線10px的紅色虛線,內距padding設為20px*/

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不產生作用。

延伸閱讀