background-clip
用来将背景图片做适当的裁剪以适应实际需要。
语法结构:
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范围内显示了。
四.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，否则的话背景图片会被遮挡。
面对疾风吧
先解释功能OK么
8年前 添加回复 0