CSS 3背景新屬性:background-clip
background-clip: border-box | padding-box | content-box
background-clip是CSS 3背景background的新屬性,主要是利用不同的裁切範圍,控制背景圖片顯示區域。
一樣只支援較新的瀏覽器,瀏覽器的支援度,可參考《CSS 3背景新屬性:background-size》,這裡就不再詳細贅述。
效果呈現
|
為了讓呈現效果有明顯的區別,範例中的屬性預設為:
width:160px;height:80px;padding:20px;border:10px dashed #E90080;background:#A9E969 url(clip_bg.jpg) no-repeat;
/*背景顏色綠色,並加上背景圖片,框線10px的紅色虛線,內距padding設為20px*/
|
background-clip: border-box;
-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外,不會顯示背景圖與背景色。
|
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;
|
padding-box效果呈現
padding以外的背景都被裁切掉,所以由此範例可以看出,內距padding外,不會顯示背景圖與背景色。
|
background-clip: content-box;
-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還有一個有趣的效果,能讓文字顯示背景圖片。
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 40px;
text-transform: uppercase;
|
效果呈現
這有點類似圖片遮罩的效果,而且還是以文字呈現,但缺點為不是所有瀏覽器都支援。
|
P.S
另外需要注意的是Firefox3.6版本以下,不直接支援background-clip: border-box | padding-box | content-box
須將CSS寫成:
-moz-background-clip: bordder-box;
-moz-background-clip: padding-box;
/*Firefox3.6不支援content-box*/
而Firefox4.0版本以上,已支援了background-clip: border-box | padding-box | content-box
所以就無須加上-moz-,如果加上了,在4.0版本中反而是錯誤的語法。
延伸閱讀
|