background-clip
用來將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實(shí)際需要。
語法結(jié)構(gòu):
background-clip:border-box|padding-box|content-box|no-clip
此屬性用于規(guī)定背景圖片在哪些區(qū)域可以顯示，當(dāng)然可以顯示的區(qū)域是由屬性值決定的。
一.border-box屬性:
此屬性值規(guī)定，背景圖片可以在邊框范圍內(nèi)顯示，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box{
background-clip:border-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box"></li>
</ul>
</body>
</html>由以上代碼的表現(xiàn)可以看出，背景圖片可以在邊框中顯示，但是在左部和上部的邊框中并沒有顯示背景圖片，這是因?yàn)槭艿搅薭ackground-origin屬性的限制，因?yàn)榇藢傩砸?guī)定背景圖片是從哪個(gè)區(qū)域開始繪制的，在默認(rèn)狀態(tài)下是padding區(qū)域開始繪制的（包含padding）。
二.padding-box屬性:
此屬性規(guī)定背景圖片可以在padding范圍內(nèi)顯示，這個(gè)時(shí)候背景圖片就不能夠在border范圍內(nèi)顯示，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
}
.padding-box{
background-clip:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>由以上代碼的表現(xiàn)可以看出，背景圖片可以在padding范圍內(nèi)繪制，邊框范圍內(nèi)就不可以繪制了。
三.content-box：
此屬性規(guī)定背景圖片可以在content區(qū)域，也就是除去padding和border的區(qū)域內(nèi)顯示，代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
}
.content-box{
background-clip:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html>由以上代碼的表現(xiàn)可以看出，背景圖片這個(gè)時(shí)候只能夠在content范圍內(nèi)顯示了。
四.tex:
從前景內(nèi)容的形狀（比如文字）作為裁剪區(qū)域向外裁剪，也就是說只有前景內(nèi)容的形狀內(nèi)顯示背景圖片，例如只有文字內(nèi)顯示背景。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:250px;
height:200px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
font-size:60px;
font-weight:900
}
.border-box{
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
/*color:transparent;*/
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box">php中文網(wǎng)</li>
</ul>
</body>
</html>由以上代碼的表現(xiàn)可以看出，背景圖片只在文字內(nèi)顯示，不過需要注意的是文字的text-fill-color或者color屬性值要設(shè)置為transparent，否則的話背景圖片會(huì)被遮擋。
