三、属性1． background－origin 属性
CSS3 background－origin 属性指定在背景图像定位在哪里．
这个属性有三个不同的值：
border－box ：背景图像从边框的左上角开始。
padding－box ：（默认）背景图像从左上角的填充边缘。
content－box ：背景图像从左上角的内容
下面的例子说明了background－origin属性：
＃example1 ｛ border： 10px solid black； padding： 35px； background： url（img／fy＿indexBg．jpg）； background－repeat： no－repeat； ｝
＃example2 ｛ border： 10px solid black； padding： 35px； background： url（img／fy＿indexBg．jpg）； background－repeat： no－repeat； background－origin： border－box； ｝
＃example3 ｛ border： 10px solid black； padding： 35px； background： url（img／fy＿indexBg．jpg）； background－repeat： no－repeat； background－origin： content－box； ｝
完整代码：
＜！DOCTYPE html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞编程字典＜／title＞ ＜style＞ ＃example1 ｛ border： 10px solid black； padding： 35px； background： url（img／fy＿indexBg．jpg）； background－repeat： no－repeat； ｝
＃example2 ｛ border： 10px solid black； padding： 35px； background： url（img／fy＿indexBg．jpg）； background－repeat： no－repeat； background－origin： border－box； ｝
＃example3 ｛ border： 10px solid black； padding： 35px； background： url（img／fy＿indexBg．jpg）； background－repeat： no－repeat； background－origin： content－box； ｝ ＜／style＞＜／head＞＜body＞
＜p＞没有 background－origin （padding－box 默认）：＜／p＞ ＜div id＝＂example1＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜p＞background－origin： border－box：＜／p＞ ＜div id＝＂example2＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜p＞background－origin： content－box：＜／p＞ ＜div id＝＂example3＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜／body＞＜／html＞ 2． background－clip 属性
CSS3 background－clip 属性指定背景的绘制面积．
该属性有三个不同的值：
border－box － （默认） 背景是画的边框外边缘 padding－box－背景被显示到填充物的外缘。content－box － 背景是画在内容框内
下面举例演示了background－clip属性：
＃example1 ｛ border： 10px dotted black； padding： 35px； background： yellow； background－clip： content－box；｝
四、总结
本文主要介绍了CSS背景，通过CSS实现多背景显示，自定义某一些尺寸显示格式，background－origin等多个属性的应用，丰富的案例帮助大家更好的理解。
希望大家自己去尝试一下，实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
