CSS: background-clip

background-clip可以設定背景圖片會延伸到哪裡，和origin不同，origin是設定起點，從上次的範例就可以看出來，圖片下方還是會延伸到border底下。

background-clip有四種屬性:

border-box

1
2
3

.box {
	background-clip: border-box;
}

border-box會讓圖片延伸到border底下。

1
2
3

.box {
	background-clip: padding-box;
}

padding-box會讓圖片延伸到padding底下，但border底下不會有圖片，會留白。

1
2
3

.box {
	background-clip: content-box;
}

content不會讓圖片超出content box的範圍，所以如果你的元素有padding和border，這兩個地方都會留白。

.box {
	background-clip: text;
	-webkit-background-clip: text;
  	color: transparent;
}

text不會讓圖片超出文字的部分，比較像是幫文字填色，但填的是圖片，要特別注意使用時要加上後面兩行，color的用意是避免圖片載入失敗，此時會導致text沒有顏色，加上color以避免這個情況，至於webkit是chrome的寫法，其他瀏覽器要稍微注意語法的支援。