width:500px;height:286px;background: url(multiple_bg01.png) no-repeat 386px 130px,url(multiple_bg02.png) no-repeat left top,url(multiple_bg03.png) no-repeat 0px 185px;
為了讓呈現效果有明顯的區別,範例中的屬性預設為:width:160px;height:80px;padding:20px;border:10px dashed #E90080;background:#A9E969 url(clip_bg.jpg) no-repeat;
|
-moz-background-clip: border-box; /*for Firefox*/
-webkit-background-clip: border-box; /*for Google Chrome、Safari*/
-o-background-clip: border-box; /*for Opera*/
background-clip: border-box; /*for IE*/
border-box是background-clip的預設值 因為預設值的關係,所以即使加上了 background-clip: border-box; ,也不會有不同的效果產生。由此範例可以看出,框線border外,不會顯示背景圖與背景色。 |
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;
padding-box效果呈現 padding以外的背景都被裁切掉,所以由此範例可以看出,內距padding外,不會顯示背景圖與背景色。 |
-webkit-background-clip: content-box;
-o-background-clip: content-box;
background-clip: content-box;
content-box效果呈現 content以外的背景都被裁切掉,所以由此範例可以看出,內容content外,不會顯示背景圖與背景色。 ※Firefox3.6以下不支援content-box |
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
text-transform: uppercase;
效果呈現 這有點類似圖片遮罩的效果,而且還是以文字呈現,但缺點為不是所有瀏覽器都支援。 |
-moz-background-clip: bordder-box;
-moz-background-clip: padding-box;
/*Firefox3.6不支援content-box*/
為了讓呈現效果有明顯的區別,範例中的屬性預設為:width:240px;height:160px;padding:20px;border:10px dashed #E90080;background:#A9E969 url(origin_bg.jpg) no-repeat;
|
-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的位置是一樣的,所以才會沒有變化。 |
-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; 同樣也能達到一樣的效果。
|
-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; 同樣也能達到一樣的效果。
|