css3背景裁切属性background-clip主要是用来决定背景的裁切区域,也就是说,background-clip是规定背景在哪些区域绘制(把多了的背景部分将裁切掉)。默认值为border-box

语法:
background-clip: border-box | padding-box | content-box;
取值说明:
border-box:背景被裁剪到边框盒。 
padding-box:背景被裁剪到内边距框。 
content-box:背景被裁剪到内容框。

1、如果值为border-box,则背景在元素的边框、补白和内容区域都会显示;

2、如果值为padding-box,则背景只会在补白和内容区域显示;

3、如果值为content-box,则背景只会在内容区域显示。

下面来看具体的示例,在看示例之前,我们先看一下background-color和background-image的显示区域。

css:

.ui-bg{
     width: 290px; 
     height: 178px; 
     border-radius: 5px; 
     border:10px solid rgba(0,0,0,0.4); 
     margin: 10px;
}
.ui-bg-color{
     background:#f60;      
}
.ui-bg-image{
       background:url(/demo/source/origin.png) no-repeat; 
}
html:
<div class="ui-bg ui-bg-color"></div>
<div class="ui-bg ui-bg-image"></div>

他们效果分别如下:

我们的边框样式是透明的,从上图中可以看出background-color,从元素的边框左上角边缘到边框右下角边缘,把整个元素都铺满了.

我们的边框样式是透明的,从上图中可以看出background-image,是从元素的padding左上角到边框边缘的右下角

下面再来看background-clip的示例

html:

<div class="clip-bg clip-0">
   <p>我是内容区域,250px*138px</p>
</div>

<div class="clip-bg clip-1">
  <p>我是内容区域250px*138px</p>
</div>
<div class="clip-bg clip-2">
   <p>我是内容区域250px*138px</p>
</div>
<div class="clip-bg clip-3">
   <p>我是内容区域250px*138px</p>
</div>
css:
.clip-bg{
   width: 250px;
   height: 138px; 
   border-radius: 5px; 
   border:10px solid rgba(0,0,0,0.3); 
   padding: 20px;
   background:#f60 url(/demo/source/origin.png) no-repeat; 
   margin: 10px;
}
.clip-bg p{
  height: 138px;
  background: rgba(0,0,0,0.5); 
  color: #fff; 
  font-weight: 600; 
  font-size: 18px;
}
.clip-0{
  -webkit-background-clip: border-box;
  -moz-background-clip: border-box;
  background-clip: border-box;
}
 .clip-1{
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.clip-2{
  -webkit-background-clip: content-box;
  -moz-background-clip: content-box;
  background-clip: content-box;
}
.clip-3{
  -webkit-background-clip: text;
  -webkit-text-fill-color:transparent;
}
.clip-3 p{
    font-size: 30px;
    font-weight: 600;
}
效果如下:

1、background-clip:border-box

我是内容区域,250px*138px

从图中可以看出,因为background-clip默认的值就是border-box,所以取值为border-box时,跟有没有设置background-clip都一样的。

2、background-clip:padding-box

我是内容区域250px*138px

当值为padding-box时,从图中可以看出,只要超过padding的部分就被裁切掉了,不显示出来了。大家可以仔细看效果图,真的是一刀裁切掉多余的部分。

3、background-clip:content-box

我是内容区域250px*138px

当值为content-box时,从图中可以看出,只要超过content区域的部分就被裁切掉了,不显示出来了。

4、background-clip:text

我是内容区域250px*138px


从图中可以看出,当值为text,能实现用背景图片来填充文本的效果,不过目前只有Safari和Chrome支持。