css3:背景属性background-origin/clip详解
前言
好了,最近进度有点慢了,继续来发css3的教程,写完css3背景属性之后我去研究下Google 开发者调试工具之webapp调试工具栏。智能手机的出现让HTML5+CSS3有了一个全新的舞台去演绎。很多的单页面都应用到了css3的酷炫效果,所以捣腾一下webapp开发工具应该可以帮助自己了解一下相关知识。算是一个加分项么。。。
前面的几篇文章已经介绍了边框属性,那么今天我们正式来入手这个背景属性,css3中新增了3大属性,分别是背景裁剪(background-clip)、背景尺寸(background-size)、背景起点(background-origin),因为涉及到的知识点不是很多,所以在这里一一写出来,算是整合吧。
背景裁剪 background-clip
先来说说背景裁剪属性clip,假如你看过前面的文章的话,那么你就会对裁剪属性有一丝了解。不过边框图片属性中是切片属性slice而非clip,对于其含义,前者是用刀子随便切,后者是为了某个区域而裁剪额外的区域,比如说桌布,想把尺寸为1.2M*1M桌布正正方方地码在尺寸为1M*1M的书桌上,那么必须用剪刀把多余的0.2M卡擦掉!而slice可不管你这么多,使出十八般武艺一道乱剪。先来看看clip的语法
属性名: | background-clip |
---|---|
属性值: | <box> [ , <box> ]* |
初始值: | border-box |
应用于: | 所有元素 |
继承性: | 无 |
百分比: | N/A |
计算值: | 根据指定 |
背景裁剪 background-clip确定了背景画布区域,对于box属性值,W3C这么解释:
<box> = border-box | padding-box | content-box>
语法解释:
1、border-box:背景图片或者颜色描绘区域延伸到边框边界,这是默认值
2、padding-box:背景图片或者颜色描绘区域只能在盒子padding区域
3、content-box:背景图片或者颜色描绘只能在内容区域起作用。
4、我们说过*这个符号就是前面的属性值可以重复一次也可以重复多次,假如重复多次必须要用 “,”来隔开。
只要记住对于背景裁剪background-clip都是基于盒子box来裁剪,分别在边框盒子、内边距盒子还有内容区盒子处裁剪。
背景图片原点background-origin
origin在英文的解释是起点,开端,起源,原点的意思,为了方便,我这里用了原点的意思。因为按照我的个人了解是这样:假如一张桌布想要改在桌子上,那么就必须先确定桌布从桌子的哪个地方先盖的,这个就是桌布的原点。所以origin在这里的意思估摸应该就是这样。既然是这样,那么这个原点的地方也跟背景裁剪属性clip一样分成三个盒子:border-box | padding-box | content-box
w3c对origin的语法如下:
属性名: | background-origin |
---|---|
属性值: | border-box | padding-box | content-box |
初始值: | padding-box |
应用于: | 所有元素 |
继承性: | 无 |
百分比: | N/A |
计算值: | 根据指定 |
背景图片原点原点属性严格意义上来说是针对css中使用图片属性background-image的情况下使用的,因为只有引用了背景图片之后才能发挥其原点的微妙区别,不信待会看下demo你就会发现的。
语法解释
1、padding-box,这是它的默认值,于裁剪clip属性默认值有所不同。该值确定了背景相对填充框作为原点位置,并且拉伸整个元素padding盒子,即从左上角到右下角拉伸,整个背景被拉伸自适应元素的宽高,这点在有border-width的时候特别明显;
2、border-box,规定了背景图片原点位置相对边框盒子
3、content-box,规定了背景图片原地位置相对内容区盒子
远观不如近邻,请轻戳 背景图片原点demo
效果图如下:
注意:
1.假如背景图片使用了 background-attachment:fixed 那么这个值是没有不起作用的,那么背景区域就是初始包含块。
2.假如 background-clip:padding-box,background-origin:border-box,background-position:top left(也就是初始位置),并且元素有一个非0数值边框宽度,那么左侧和顶部边框的图片会被裁剪。
/*第1点注意点*/ .im-com{ padding:10px; background-image:url(http://img.xiaoho.com/mystar/mada4.jpg); background-position: top left; } .no-effect{ background-attachment:fixed; /*使用了fixed,那么在origin就会失效*/ background-origin:content-box; } .normal{background-origin:content-box;/*不使用fixed*/} /*第2点注意点*/ .padding-box{ background-image:url(http://img.xiaoho.com/mystar/mada4.jpg); background-position:top left; background-origin:padding-box; border:10px #ccc;/*变宽宽度非负数,使用padding-box*/ border-style:dashed dotted; } .border-box{ background-image:url(http://img.xiaoho.com/mystar/mada4.jpg); background-position:top left; background-origin:border-box; border:10px #ccc;/*变宽宽度非负数,使用border-box*/ border-style:dashed dotted; }
远观不如近邻,请轻戳 背景图片原点2点注意
效果图如下:
图片中画圈圈的地方就是第二点注意点,假如元素没有设置边框或者为透明边框,那么设置padding-box和border-box似乎看上去都是一样的,但是假如设置了一个非负的边框宽度,那背景图片的原点位置将会不一样,padding-box元素左上角为原点向右下角进类似拉伸,而 border-box 则是从元素边框开始作为起点位置。
后话
为什么要拿两个属性合成一个来说其实就是其属性值都是一样的,但是其所表达的不尽相同。不过真实用到的该属性的貌似确实有点少,除非是在射击湿非要在设计图上边框和背景分离开来,那可能确实需要用到该属性。
明天继续讲诉背景尺寸background-size,那么各位晚安了。时间到了晚12点了,最近不做熬夜的伪程序员。
参考资料:
http://dev.w3.org/csswg/css-backgrounds/#the-background-origin
http://dev.w3.org/csswg/css-backgrounds/#background-clip
原创文章,转载请注明来自:◎小黑路人xiaoho.com
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2772)
- 一张背景实现自适应九宫格 (阅读:2559)
- 缩小窗口<body>背景被裁掉 (阅读:2395)
- 两侧背景自动延伸的CSS实现方法 (阅读:2350)
- 渐变背景上的内容垂直居中 (阅读:2275)
- 一个标签应用三个背景图片 (阅读:2259)
- 消失的列表背景 (阅读:2160)
- 改善IE6中a与a:hover的背景支持 (阅读:1979)
- 页面元素的背景及boder被裁掉 (阅读:1905)
- 无缝背景的推荐 (阅读:1987)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:suchanghai 来源: 小黑路人-苏昌海-xiaoho.com-分享html/css/web前端知识
- 标签: background-origi clip 背景
- 发布时间:2015-02-07 21:05:04
- [41] 界面设计速成
- [40] IOS安全–浅谈关于IOS加固的几种方法
- [39] 图书馆的世界纪录
- [38] 如何拿下简短的域名
- [38] Oracle MTS模式下 进程地址与会话信
- [37] android 开发入门
- [35] 视觉调整-设计师 vs. 逻辑
- [35] 【社会化设计】自我(self)部分――欢迎区
- [33] 程序员技术练级攻略
- [33] 读书笔记-壹百度:百度十年千倍的29条法则