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*/