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

網頁知識：網頁設計：CSS 3背景新屬性background-clip

CSS 3背景新屬性：background-clip

效果呈現

進階學習

延伸閱讀