< > 5-2 CSS3背景 background-clip

CSS3背景 background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>背景裁切</title>
<style type="text/css">
.wrap {
    width:220px; 
    border:20px dashed #000; 
    padding:20px; 
    font-weight:bold; 
    color:#000; 
    background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; 
    background-origin: border-box;
    background-clip:padding-box;
    position: relative;
}
.wrap span {
    position: absolute; 
    left:0;
    top:0;
}
.content {
    height:80px;
    border:1px solid #333;
}
</style>
</head> 
<body>
<div class="wrap"><span>padding</span>
    <div class="content">content</div>
</div>
</body>
</html>

 

posted @ 2017-10-18 17:18  罪恩徒斯  阅读(70)  评论(0)    收藏  举报