今天总结一下background-clip的用法,这个属性很重要,但是不常用。要理解明白background-clip的四个属性值,首先要明白css2中的盒子模型相关知识,这里指的是现代浏览器的盒子模型,ie怪异模式请关闭当前网站,啥年代了还ie5/6呢?

对于HTML5标签出现之前来说,很多老程序员都喜欢网站代码除了table就是是div,这也是对盒子模型的应用,可以这样说,html的所有标签都具备盒子模型,不信你就通过审查元素一个个点选看看,这些p/span/ul/table...是否带有自己的盒子模型。考虑一个问题:前端开发写页面用一个div都可以实现,为什么html5又定义那么多新标签?

答案:HTML5标签又称语义化标签,就是为了提高h5页面可读性,以及代码的美观度,降低新手学习门槛,这样当你看到nav知道这里是个导航,aside就是不太重要的模块内容...


说了那么多,盒子模型到底是什么,总结来说:所有的html标签元素都具备盒子模型,都有自己的margin-外边距区域/border-边框,描边区域/padding-内填充区域/content正文区域,如下图-body的四个区域:

css的盒子模型,说起来可能不明白,当你打开浏览器,按F12的时候,看body的属性,就看到有一个不同颜色的盒子模型存在了,默认的显示body的盒子模型。

关于盒子模型的四个属性这里就不啰嗦了,接下来步入正题background-clip的用法(个人理解):

background-clip:用来指定元素背景所在的区域从哪个地方开始渲染,默认值是border-box

css 公式:background-clip:border-box|padding-box|content-box|text

  1. 1.border-box 默认值,背景元素从“边框”开始渲染,这时边框在背景上层。
  2. 2.padding-box 背景元素从“内填充”区域开始渲染,不会溢出到border区域内;
  3. 3.content-box 背景元素从“内容”区域开始渲染,不会溢出到border和padding区域内;
  4. 4.text 背景元素只对文字生效,相当于ps里面的剪切蒙版了,这里的话背景元素会叠加到文字上,文字以外的地方不显示。

体验代码:

<style type="text/css">
.box{width: 200px;height: 200px;margin-bottom: 20px;background: blue;background-image: url(../img/4.jpg);padding:20px;border: 10px solid rgba(0,0,0,.3);}
.bb{background-clip: border-box;}
.pb{background-clip: padding-box;}
.cb{background-clip: content-box;}
.bt{background-clip: text;-webkit-background-clip: text;color: transparent;}
.t{font: 50px/200px "微软雅黑";font-weight: 600;}
</style>
<div class="box bb">  </div>
<div class="box pb">  </div>
<div class="box cb">  </div>
<div class="box bt t">51QUX</div>

效果图:

注意:background-clip:text的兼容性不太好,需要谷歌需要-webkit-background-clip,同时文字颜色必须是透明,才能显示下面的背景,就像玻璃栈道一样,透明玻璃才能看到下面的风景!

整体兼容性还可以,可以放心大胆使用: