CSS3 Background-clip
上一节在《CSS3 background-size》详细的介绍了CSS3为background新增属性之一,今天和大家一起来学习CSS3中有关于Background的第二新属性Background-clip。CSS3中的Background-clip属性,其主要是用来确定背景的裁剪区域,换句话说,就是如何控制元素背景显示区域。首先来看其语法:
background-clip : border-box || padding-box || content-box
取值说明:
1、border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;
2、padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;
3、context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;
形象一点的可以参照下图的layout所示:
不知道大家没有深入的去了解Box Model中background部分,background在Box Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background,但有一点需要注意,background-color是从元素的边框左上角起到右下角止,而background-image却不一样,他是从padding边缘的左上角起而到border的右下角边缘止,如果大家对上面那句话不太好理解的话,我们一起来看一个简单的Box Model加上边框和背景色,背景图片的示意图:
<div class="demo"></div>
为了更好的看出问题,我们给上面的demo元素加上一个样式:
.demo {
width: 220px;
height: 115px;
padding: 20px;
border: 20px dashed rgba(255,0,0,0.8);
background: green url("../images/box-shadow-img.png") no-repeat;
font-size: 16px;
font-weight: bold;
color: red;
}
下面的效果就更清晰的说明了上面那句话:
但如何能让他们在统一的位置显示呢?那就是今天所要介绍的background-clip,这个属性就会让背景色和背景图片统一在相同的位置,前面也简单说过,background-clip会根据不同的属性值进行裁剪多了的背景部分。那么background-clip有哪些浏览器能支持呢?详细的先来看下面图:
background-clip和background-size一样,在各种浏览器内核下,都具有自己的私有前缀,但background-clip在Mozilla下分得特别的细,那么先来看看background-clip在Mozilla下的语法规则:Mozilla内核(如Firefox)在3.6版本以下是不支持border-box;padding-box;content-box的语法规则,其语法如下:
1、Firefox3.6版本以下(包含3.6版本):
-moz-background-clip: border || padding /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
2、Firefox4.0版本以上:
Firefox4.0版本以上,支持border-box,padding-box,content-box并且无需带上其前缀,如果你一不小心带上了“-moz”,那么在Firefox4.0+版本反而是一种错误的写法
background-clip: border-box || padding-box || content-box /*Firefox 4.0+ (Gecko)*/
详细的大家可以到Mozilla.org查看background-clip | -moz-background-clip。虽然网上介绍Opera在9.6+版本就支持-o-background-clip属性的使用,但其实是存在bug的,直到Opera11才正式支持。如此一来,background-clip兼容各浏览器的正确写法应该如下:
/*Firefox3.6-*/
-moz-background-clip: border || padding;
/*Webkit*/
-webkit-background-clip: border-box || padding-box || context-box;
/*W3C标准 IE9+ and Firefox4.0+*/
background-clip: border-box || padding-box || context-box;
上面简单介绍了background-clip属性的使用方法以及在各浏览器下的兼容等理论知识,下面我们针对background-clip的三个属性值border-box,padding-box,content-box在实际应用中的效果,为了更好区分他们之间不同之处,先创建一个共同的demo,demo的HTML代码:
<div class="demo"></div>
CSS Code:
.demo {
width: 220px;
height: 115px;
padding: 20px;
border: 20px dashed rgba(255,0,0,0.8);
background: green url("../images/box-shadow-img.png") no-repeat;
font-size: 16px;
font-weight: bold;
color: red;
}
效果:
上图显示的是在没有应用background-clip对背景进行任何设置下的效果,接下来先看第一个属性值:border-box。
DEMO一、background-clip:border-box
首先在前面的demo基础上,给div.demo加上一个class名“borderBox”,然后在这个Demo上加上background-box:border-box的属性:
.borderBox {
-moz-background-clip: border;
-webkit-background-clip: border-box;
-o-background-clip: border-box;
background-clip: border-box;
}
效果:
从效果图中可以看出,background-clip取值为border-box时,跟没有设置background-clip效果是完全一样的,那是因为background-clip的默认值为border-box。
DEMO二、background-clip:padding-box
在上面的基础上稍微做一下修改,把刚才的border-box换成padding-box值,看看会有什么变化?
.paddingBox {
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;
}
效果:
此时效果就与原来默认下有明显的区别了,图上可以得知,只要超过padding边缘的背景都被裁剪掉了,此时的裁剪并不是让背景成比例裁剪,而是直接将超过padding边缘的背景剪切掉。
DEMO三、background-clip:content-box
按同样的方法,大家一起来测试background-clip中的content-box效果
.contentBox {
-webkit-background-clip: content-box;
-o-background-clip: content-box;
background-clip: content-box;
}
效果:
明显背景只在内容区域显示,超过内容边缘的背景直接被裁剪掉了。需要说明一点:content-box在Firefox3.6版以下不被支持。
上面主要介绍了background-clip各个属性值的运用与效果,而webkit下background-clip还有一个更神奇的效果,就是可以让图片填充文本,那就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent,下面大家一起来见正这个神奇:
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
在前面的基础上,我们把样式换一下
.text {
font-size: 40px;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
效果:
到目前为止只有Safari和Chrom才能实现用背景图片来填充文本的效果,如果是在iphone上开发的朋友,这个功能制作一些特殊效果还是蛮实用的。其实background-clip中的padding-box和content-box在实际应用中也是蛮有用处的,比如说Facebook弹出窗口,边框带有透明并能显示底下的内容如下图所示:
平时我们制作这样的效果都是靠给弹出层的背景加上opacity属性,并设置一定的内距,但大家都知道opacity会直接影响到其子元素的效果;另外一种就是使用jq插件来制作,或者有的朋友会说可以使用《CSS3 RGBA》来设置元素边框,但试过的朋友都知道,我们也需要外加一个层来控制,不然元素的背景会遮住边框的效果,如下图所示:
制作如此麻烦,那有没有什么更好的方法吗?回答是有的,那就是使用background-clip把元素背景控制在padding或content区域内,这样一来,只需一个非常div,我们在这个div上加上透明边框,并配合background-clip把背景超过padding或content的边缘外的背景色直接裁剪掉,具体CSS代码如下:
.facebook {
background: #3B5A98;
border: 20px solid rgba(134,134,134,0.8);
padding: 10px;
color: #fff;
text-align: center;
width: 150px;
height: 65px;
line-height: 65px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
font: bold 25px Airal;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;
}
效果:
上面介绍了一个使用background-clip:padding-box配合border-color:rgba()值制作了一个Facebook弹出窗口效果,这里我们没有使用任何js,而是直接使用纯CSS制作出来的,感兴趣的朋友可以尝试下如何制作。
到这里,今天的内容就介绍完了,本节主要是介绍了background-clip属性的使用,并介绍了两种特殊效果的制作,其实background-clip并不单独使用,其更多是配合background中另一个属性background-origin一起使用,以达到不同的效果。那么下节主要给大家介绍background-origin的使用,感兴趣的朋友可以随时观注本站有关CSS内容的更新。如果大家对background-clip有更深更独特的见解,欢迎与您一起学习。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-background-clip © w3cplus.com
CSS3 Background-clip的更多相关文章
- css3 & background & background-image
css3 & background & background-image https://developer.mozilla.org/en-US/docs/Web/CSS/backgr ...
- css3 background
background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
- CSS3 background属性
background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...
- css3整理--clip
clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...
- css3中clip属性
clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...
- css3属性clip
clip 属性定义了元素的哪一部分是可见的.clip 属性只适用于 position:absolute 的元素. rect(<top>, <right>, <bottom ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
随机推荐
- L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误(转)
L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误 错误描述:“ L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误” 只有这个没有错误码. ...
- Linux 基础学习:文件权限与种类
1.文件权限 linux系统中通过 “ls -al”,可查看当前目录的所有文件的详细信息. 第一列代表这个文件的类型与权限: 第一个字符表示文件类型: [d]:表示目录文件 [-]:表示普通文件 [l ...
- 【转】手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)
1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理! 我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...
- 使用Builder模式创建复杂可选参数对象
在新建对象时,若需要对大量可选参数进行赋值,最常见的做法是JavaBeans模式,即调用一个无参构造方法创建对象,然后调用setter方法来设置每个必要的参数,以及每个相关的可选参数.代码示例如下: ...
- git命令的理解与扩展
Git的模式如图: Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Repository:仓库区(或本地仓库) 一.新建代码库 # 查看gi ...
- Linux基础优化与安全归纳总结
一名运维工程师在运维岗位上时间久了,就会发现Linux优化的重要性,同时会给运维工作带来很多的便利性.本人逐渐认识到了这一点,所以特意在工作闲暇之余,通过阅读Linux相关书籍及向同事.同行高手咨询, ...
- OO第一单元总结——多项式求导
第一次作业分析 1.程序结构分析 类图: 好吧,这一次基本上完全是在面向过程编程,没有看出来任何的面向对象的特性. 复杂度: 可以看到模块间的相互耦合度很高,PolyDerive方法的非结构化程度也不 ...
- yolov3和darknet opencv版编译安装及基本测试
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 一.准备工作: 安装pkg-config:sudo apt-get install pkg-confi ...
- JavaScript的数据结构和算法
所有JavaScript对象都有hasOwnProperty(value)的方法,用来返回一个表明对象是不是具有这个value Key值属性的布尔值. javaScript的方法 具有delete的方 ...
- BigDecimal(大浮点数)
因为这个单词,和他的四则运算方法总是记不住,所以写入博客,在没有印象的时候再看看自己的博客. BigDecimal的加减乘除不和double float 一样,他需要使用方法来进行加减乘除. 加法:a ...