網頁設計:CSS 3背景新屬性background-clip

日期 2012年02月02日 06:27:38 | 新聞類別: 網頁知識

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版本中反而是錯誤的語法。

延伸閱讀




本篇新聞來自:KIP網頁設計公司
https://www.kip.com.tw

本篇新聞的連結網址是:
https://www.kip.com.tw/modules/news/article.php?storyid=37