深入浅出CSS3：background-clip,background-origin和border-image教程(2)
设置background-origin 之后的效果图：
因为是在火狐下做的测试,所以-moz- background-origin代替background-origin,相应的属性所以也去掉了-box
效果和作用已经一目了然了：我们看到，当background-origin的值为content-box时，首先会让背景图片的左上角和内容边缘左上角对齐，padding-box时，则会让背景图片的左上角和内边距的左上角对齐。以此类推。可见background-origin的值的确是决定背景图片开始从哪个区域开始显示。但话说回来，如果我没有设置任何的background-origin属性的话，它默认的起始位置在哪呢？这里就不演示了，但有必要记住—— padding。
有一点要十分的注意：如果背景不是no-repeat的话，这个属性是无效的。它会从border-box区域开始显示，这一点很重要。
background-origin属性就先介绍到这里。应该不难吧。下面继续介绍background-clip。之所以没有把这两个属性分为两节分别介绍，因为实战的经验告诉我这两个属性应该是相互搭配才能相得益彰。
clip原意为裁剪，截取。同样顾名思义，background-origin的作用为将背景图片做适当的裁剪，以适应需要。当然这里并不是真正意义上的把图片给裁剪了，而是根据属性值。把图片的某些部位做适当的隐蔽。background-clip与origin的可选择一样，也是有content- box,padding-box,border-box(要注意在火狐和Chrome和Safari中，需要使用私有属性，加上-mox-和 -webkit-,这里就不赘述了，参考解释background-clip的内容)。怎样个剪裁法呢。根据你设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。举个具体例子，图片起始位置和上面的例子一样，比如是从border-box开始，但我background-clip设置的值是content-box，在content之外，也就是border-box内，padding-box内的图片内容统统不可见。尽管你是让图片从边框开始显示。实例如下
.border { background:url("images/qwqw_s.jpg") black; background-repeat:no-repeat; background-position:left top; border-width:30px; border-style:dashed; border-color:red; background-clip: content-box; background-origin: border-box; -moz-background-clip: content; -moz-background-origin: border; -webkit-background-clip: content; -webkit-background-origin: border; width:180px; height:254px; padding:30px; margin:0 auto; }
正如以上所说，我们可以看见虽然图片是从顶着边框的左上角进行定位，但是裁剪属性background-clip的属性是设置为 content-box,所以只有content区域的内容看得见，也就是只要是在content之外的图片内容都被隐蔽掉了。
我之所以要在不同浏览器下进行测试( <style>@font-face { font-family: "宋体"; }@font-face { font-family: "Cambria Math"; }@font-face { font-family: "Calibri"; }@font-face { font-family: "@宋体"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10.5pt; font-family: "Calibri","sans-serif"; }.MsoChpDefault { }div.Section1 { page: Section1; }</style> Firefox/3.6.3，Google：7.0.517.24， <style>@font-face { font-family: "Cambria Math"; }@font-face { font-family: "Calibri"; }@font-face { font-family: "@宋体"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10.5pt; font-family: "Calibri","sans-serif"; }.MsoChpDefault { }div.Section1 { page: Section1; }</style> Opera/9.80, <style>@font-face { font-family: "Cambria Math"; }@font-face { font-family: "Calibri"; }@font-face { font-family: "@宋体"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0cm 0cm 0.0001pt; text-align: justify; font-size: 10.5pt; font-family: "Calibri","sans-serif"; }.MsoChpDefault { }div.Section1 { page: Section1; }</style> Safari：5.0.1)，答案也在图上，我们看到在火狐下的结果和其他浏览器结果竟然不一样。明明background-clip设置的属性是 content-box，但却没有图片的任何部位被屏蔽。我想说的是：在火狐下-moz-background-clip属性是没有content这一值的(但是padding和border还是有的)，在firebug中可以看到，-moz-background-clip的值直接是border，当你强行改为content时，这条属性会直接从bug中消失。当然这只是在 3.6.3版本下的结果，至于在4.0版本中表现如何(虽然只是beta版)。可以自行测试& lt;/span>
四．实战
在学习了基本background-clip和background-origin用法和原理之后，我们将通过操作一个实际的例子，来加深我们的学习：
这个圆角背景是由三部分组成：
和
和
(呃，其实是从Webqq2.0网站上撬下来的，就是上面的工具条……但是作为教学用，应该无伤大雅吧……)，思路和开篇的那个黑背景制作过程是一样的，左右固定，中间窄的repeat-x。但是这会不用插入三个div，又要设置float,又要设置display考虑布局那么麻烦。
步骤一：
先搭建一个框架出来，给一个布局。不着急把图片插入进去。主意看以下代码，有几点需要说明的：因为仅需在盒子左右两侧插入背景，且恰好为左右要插入图片的宽度(如果不恰好为那么宽呢？那么不会成功的，因为css3中还没有属性能控制图片在边框中的定位，你会想不是有background- position属性吗？要注意那个是控制图片在整个盒子中的定位。还是不信的话你可以亲自试试)；还有就是padding的值也是可以不用设置的，是为了与上面的例子尽力保持一致，方便大家对比学习 margin也是为了让盒子居中而已，可以忽略；最后border-style和border-color也是方便大家理解布局才添加上去的。
.border { background:black; border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/ border-style:dashed; border-color:Red; width:180px; height:90px; /*因为要适应图片，所以宽度改小一点*/ padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/ margin:0 auto; } 
步骤二：
这一步很简单，就是把中间需要x轴重复的图片添加上去，并且把黑色背景去掉
.border { background:url("images/tool-bar/bg_b_c.png");/*添加背景*/ background-repeat:repeat-x; background-position:center; border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/ border-style:dashed; border-color:Red; width:180px; height:90px; /*因为要适应图片，所以宽度改小一点*/ padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/ margin:0 auto; }
步骤三：
这步也很简单，就是把中间重复的背景的左右两端去掉，为了方便我们下一步在左右边框中插入需要的图片。注意这里的
-moz-background-origin的content属性是无效的，实际上这里的值是padding。正如在上一节的最后说道，在火狐中是没有content这个属性的。如果有朋友想要copy这段代码，记得根据浏览器版本做相应的修改，把origin的值content改为 padding，或者把盒子的padding去掉。
.border { background:url("images/tool-bar/bg_b_c.png"); background-repeat:repeat-x; background-position:center; -moz-background-clip: padding; -moz-background-origin: content; /*firefox中background-origin没有content这个属性，其实现在的值是padding。在其他浏览器中是有效的*/ border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/ border-style:dashed; border-color:Red; width:180px; height:90px; /*因为要适应图片，所以宽度改小一点*/ padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/ margin:0 auto; }
步骤四：
这一步还是很简单，插入边框的左右两张图片，并设置好position，repeat，clip等值。注意当存在多个图片时，设置值的格式，用逗号隔开。
评论