css3:背景属性background-origin/clip详解 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> css3:背景属性background-origin/clip详解

css3:背景属性background-origin/clip详解

浏览:1138次出处信息

前言

好了，最近进度有点慢了，继续来发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、我们说过*这个符号就是前面的属性值可以重复一次也可以重复多次，假如重复多次必须要用 “,”来隔开。

背景裁剪三个属性值的调用demo

只要记住对于背景裁剪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

本文地址：http://xiaoho.com/?p=823

原创文章，转载请注明来自：◎小黑路人xiaoho.com

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

后一篇：table-cell的手机应用场景 >>

文章信息

作者：suchanghai 来源：小黑路人-苏昌海-xiaoho.com-分享html/css/web前端知识
标签： background-origi clip 背景
发布时间：2015-02-07 21:05:04

建议继续学习

近3天十大热文