三、属性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等多个属性的应用，丰富的案例帮助大家更好的理解。

希望大家自己去尝试一下，实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。