網頁知識:網頁設計:CSS 3背景新屬性background-origin
20114
次閱讀
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不產生作用。