当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | background-clip

CSS属性参考 | background-clip

2016-03-31

background-clip属性指定元素背景的绘制区域,设置元素的背景(背景图片或背景颜色)是否延伸到边框下面。

在CSS中一个元素有3个区域,我们通常称为盒模型。在盒模型中存在有:border box(边框区域),padding box(补白区域)和content box(内容区域)。另外,还存在第4个区域margin box(边距区域),它用于指定元素外边距。

CSS盒模型示意图

一个元素的背景在被渲染的时候,通常边框区域以内的所有区域都会被绘制。

通过background-clip属性,我们可以控制在渲染背景时绘制哪个区域。指定区域外面的区域在渲染时会被裁剪掉。例如,如果指定background-clip属性为padding-box(补白区域),那么border box(边框区域)就会被裁剪掉,元素背景渲染后边框部分没有任何效果。

如果没有设置背景颜色或图片,那么这个属性只有在边框(border)设置为透明或半透明时才能看到视觉效果。否则,这个属性造成的样式变化会被边框覆盖住。

当元素有多个背景图像时,可以使用逗号来分隔多个background-clip值,每一个值对应一个背景图像。

官方语法
background-clip: border-box | padding-box | content-box                              
                            

参数:

  • border-box:背景延伸到边框外沿(但是在边框之内)。
  • padding-box:边框部分(整条边框的下方)没有背景,即背景延伸到内边距外沿。
  • content-box:背景裁剪到内容区域 (content-box) 外沿。

background-clip属性的初始值为border-box

例如下面都是有效的CSS代码:

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;                              
                            

下面的例子通过一个简单的代码来了解3种边框的区别:

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>                              
                            
.box{
  width: 200px;
  height: 200px;
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 30px;
  border: 10px dotted #d2527f;
  background-image: url(img/banner_bg_10.png);
}  
.box1{
  background-clip: border-box;
}         
.box2{
  background-clip: padding-box;
}
.box3{
  background-clip: content-box;
} 
                            
border-box
padding-box
content-box
适用范围

background-clip属性可以使用在所有HTML元素上。

在线演示

下面的这个例子中,你可以选择不同的background-clip属性值来查看得到的效果:

下面的例子展示了元素有多个图像背景时,为各个背景设置不同的background-clip属性的情况。

.element {
    background-image: url(img/green.jpg), urlimg/red.png);
    background-clip: content-box, border-box;
}                          
                        

这里有2个背景图像,各个背景图像分别使用不同的background-clip属性。第一个背景图像会显示在后一个背景图像的上面,所以根据指定的背景剪裁区域,其中一个背景可能会被另外一个隐藏。

下载源代码

浏览器支持

css background-clip属性的浏览器兼容列表

完整的兼容性列表可以查看:http://caniuse.com/#feat=background-img-opts

相关阅读
Previous:
上一篇:CSS属性参考 | <blend-mode>
Next:
下一篇:CSS属性参考 | <color>

我要评论

返回顶部