在css3中background-clip属性与background-origin属性的用法介绍


Posted in HTML / CSS onNovember 13, 2012

困惑在哪里?

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。

比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透明的,不然它会覆盖住背景)

在css3中background-clip属性与background-origin属性的用法介绍

这里为了既体现出边框,又体现出边框中的背景,我特意使用了虚线的边框。(我是在chrome上做的demo,所以css3属性只使用了webkit前缀)

运行效果如下

在css3中background-clip属性与background-origin属性的用法介绍

我们看到黑色部分是虚线的边框(因为边宽宽度很大,所以虚线看起来怪怪的),虚的地方正好露出了背景。

所以使用background-origin能够把背景显示的边框上。那background-clip又是做什么滴捏?

很多书上或文章上的解释是background-clip是用来控制背景的显示范围的,那么是不是background-clip也可以让背景显示在边框上呢?那就试试咯

还是用上面的代码,不过这回是把里面的background-origin改为background-clip

在css3中background-clip属性与background-origin属性的用法介绍

然后看下运行结果

在css3中background-clip属性与background-origin属性的用法介绍

我们看到背景并没有在边框上显示,看来background-clip并没有这个功能。那这货到底有什么用呢?

 

元芳,关于background-clip与background-origin这两个东西,你怎么看?

大人,经过明察暗访,卑职已经摸清了这二人的底细,容卑职慢慢道来。

首先来看background-clip, mozilla官网上的解释是:

在css3中background-clip属性与background-origin属性的用法介绍

这解释还是很让人蛋疼,义译过来大概就是规定背景图片或颜色是否能在边框下显示。但前面已经说了,把background-clip设为border是没任何效果的。事实上,background-clip的默认值就是border

其实background-clip的真正作用是决定背景在哪些区域显示。如果它的值为border,则背景在元素的边框、补白和内容区域都会显示;如果值为padding,则背景只会在补白和内容区域显示;如果值为content,则背景只会在内容区域显示。

那为毛前面的background-clip:border不起作用?这就得说说background-origin了

这回还是不看什么官网啊手册啊什么的了,我直接说说我的理解。

background-origin是指背景显示的区域,或者说背景是从哪个区域开始绘制的(边框、补白或内容区域)。

还不理解的话那就这么来说吧,background-position总该知道吧?它指定了背景的位置,比如background-position:0px 0px ;那这个0像素是指相对于哪里来说的呢?这就涉及到一个参照点的问题了。background-origin的作用就是指定background-position的参照点是在边框区域的左上角,还是在补白区域的左上角,或是在内容区域的左上角,对应的三个值就分别是border、padding、content. background-position的也可以是left、right等方向词语,这时候就不能说参照点了,而应该说参照面,如果值为background-origin的值为border,则参照面包括边框区域、补白区域、内容区域三个部分,如果值为padding,则参照面只包括补白区域和内容区域,如果值为content,则不用我讲了吧。

这个时候再来看看前面那个问题就豁然开朗了,你把background-clip设为border,这时候边框里是能显示背景的,但问题是背景并不是从边框的左上角开始绘制的,它是从补白区域才开始绘制的,女神背景压根就没想要搭理?潘勘呖颍??潘堪诔鲆桓龌潮Ю从?优?裼钟懈銎ㄓ冒。?辖粝溉砼馨伞?ackground-origin的默认值是padding,也就是默认从补白区域开始绘制背景。

但?潘恐沼心嫦?眨?径?傥藁胤凼保?北涑珊谀径??裨倮赐痘乘捅?保?潘恳餐耆?梢运狄簧?翰唬?/p>

所以当background-origin的值为border,而background-clip的值为padding时,虽然背景是从边框区域开始绘制的,但因为设定了边框不显示背景,所以本来属于边框的那一部分背景就不会显示出来,就好像背景图片被裁剪了一部分一样。看下代码:

在css3中background-clip属性与background-origin属性的用法介绍

效果如下:

在css3中background-clip属性与background-origin属性的用法介绍

 

最后总结一下

background-clip:border|padding|content

该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

background-origin:padding|border|content

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了

HTML / CSS 相关文章推荐
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 #HTML / CSS
css3绘制天猫logo实现代码
Nov 06 #HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 #HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 #HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 #HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 #HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 #HTML / CSS
You might like
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jQuery select控制插件
2009/08/17 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
小学感恩节活动总结
2015/03/24 职场文书
2016年春节慰问信息
2015/03/25 职场文书
宾馆安全管理制度
2015/08/06 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL