开门见山,简单来说
background-origin定义了background的绘制区域(就是从什么地方开始绘制),三个属性
padding-box 背景图像相对于内边距框来绘制
border-box 背景图像相对于边框盒来绘制
content-box 背景图像相对于内容框来绘制
background-origin有一点要十分的注意:如果背景不是no-repeat的话,这个属性是无效的。它会从border-box区域开始显示,这一点很重要。
background-clip定义了background的显示区域,三个属性
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
其实属性是一样的,例如:当然如果你也可以定义从border开始绘制,而用background-clip让他不显示。
实例:
如果我们以前要实现一个这样一个例子的话(中间宽度随着文字的增加自适应,而背景是图的话)
需要这么写
<style type="text/css"> *{margin:0;padding:0;} .c1{height:32px;background: url(1.png) no-repeat center top;display: inline-block;width:15px;line-height: 32px;} .c2{height:32px;background: url(2.png) repeat-x center top;display: inline-block;line-height: 32px;vertical-align: top;color:#fff;} .c3{height:32px;background: url(3.png) no-repeat center top;display: inline-block;width:15px;width:15px;line-height: 32px;} </style>
<div class="c1"></div><div class="c2">cccccc</div><div class="c3"></div>
定义三个div,旁边两个div固定,中间的div背景设置repeat-x
css3出来以后,我们可以利用background-clip,background-origin这两个属性这样写
<style type="text/css"> *{margin:0;padding:0;} .c1 { background:url("2.png"), url("1.png"), url("3.png"); background-repeat:repeat-x,no-repeat,no-repeat; background-position:center,left,right; background-clip: padding-box,border-box,border-box; background-origin:padding-box,border-box,border-box; -moz-background-clip: padding,border,border; -moz-background-origin: content,border,border; border-width:0 15px; border-style:dashed; border-color:transparent; width:auto; height:32px; color:#fff; display: inline-block; } </style> <div class="c1">cccccc</div>
有兴趣的朋友,可以尝试一下