用來將背景圖片做適當的裁切以適應實際需求。
語法結構:
background-clip:border-box|padding-box|content-box|no-clip
此屬性用來規定背景圖片在哪些區域可以顯示，當然可以顯示的區域是由屬性值決定的。
一.border-box屬性:
此屬性值規定，背景圖片可以在邊框範圍內顯示，程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</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>由以上程式碼的表現可以看出，背景圖片可以在邊框中顯示，但是在左部和上部的邊框中並沒有顯示背景圖片，這是因為受到了background-origin屬性的限制，因為此屬性規定背景圖片是從哪個區域開始繪製的，在預設狀態下是padding區域開始繪製的（包含padding）。
二.padding-box屬性:
此屬性規定背景圖片可以在padding範圍內顯示，這個時候背景圖片就不能夠在border範圍內顯示，程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</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>由上述程式碼的表現可以看出，背景圖片可以在padding範圍內繪製，邊框範圍內就不可以繪製了。
三.content-box：
此屬性規定背景圖片可以在content區域，也就是除去padding和border的區域內顯示，程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</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>由以上程式碼的表現可以看出，背景圖片這個時候只能夠在content範圍內顯示了。
4.tex:
從前景內容的形狀（例如文字）作為裁剪區域向外裁剪，也就是說只有前景內容的形狀內顯示背景圖片，例如只有文字內顯示背景。
程式碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</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中文网</li>
</ul>
</body>
</html>由上述程式碼的表現可以看出，背景圖片只在文字內顯示，不過需要注意的是文字的text-fill-color或color屬性值要設定為transparent，否則的話背景圖片會被遮住。
下一節