CSS3背景 background-clip，十天精通CSS3教程-慕课网

5-2 CSS3背景 background-clip

本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3背景 background-clip

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

语法：

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

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

效果如下图所示：

任务

在右侧代码编辑器窗口的第15行，输入正确内容使背景从“内填充区域”开始裁切。

index.html

<!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: ?;
    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>