is used to appropriately crop the background image to meet actual needs.
Grammar structure:
background-clip:border-box|padding-box|content-box|no-clip
This attribute is used to specify in which areas the background image can be displayed. Of course, the area that can be displayed is determined by the attribute value.
一.border-box attribute:
This attribute value stipulates that the background image can be displayed within the border range. The code example is as follows:
<!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>The performance of the above code can It can be seen that the background image can be displayed in the border, but the background image is not displayed in the left and upper borders. This is because it is restricted by the background-origin attribute, because this attribute specifies the area from which the background image is drawn. , in the default state, the padding area is drawn (including padding).
2.padding-box attribute:
This attribute stipulates that the background image can be displayed within the padding range. At this time, the background image cannot be displayed within the border range. The code example is as follows:
<!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>It can be seen from the performance of the above code that the background image can be drawn within the padding range, but not within the border range.
3.content-box:
This attribute stipulates that the background image can be displayed in the content area, that is, the area excluding padding and border. The code example is as follows:
<!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> It can be seen from the performance of the above code that the background image can only be displayed within the content range at this time.
四.tex:
Crop outward from the shape of the foreground content (such as text) as the cropping area, that is to say, only the background image is displayed within the shape of the foreground content, for example, only the text is displayed background.
The code example is as follows:
<!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>As can be seen from the performance of the above code, the background image is only displayed within the text, but it should be noted that the text-fill-color or color attribute value of the text must be set to transparent, otherwise the background image will be blocked.
Next Section