background-clip,background-origin

开门见山，简单来说

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>

有兴趣的朋友，可以尝试一下

巴特西

background-clip,background-origin

最新文章

热门文章