CSS 3中设置背景图片的显示区域

    backgroud-clip属性用来设置背景图片的显示区域。这是CSS 3新增的一个背景相关属性。该属性有3个属性值，如下所示。

    在了解backgroud-clip属性之前，我们需要先来了解一下什么是网页的边框区域、内边距区域和内容区域。通过一幅图来了解一下，如图1所示。
http://s11/mw690/76855271td8f1f903145a&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />
    图1  HTML页面组成图

    由图1可以看出，HTML页面是由内容区域、内边距区域、边框区域和外边距区域组成的。边框、内边距和外边距将在后面的小节中详细讲解。这里我们只是先大概了解一下它们的分布。
    下面通过一个例子来更详细的了解backgroud-clip属性。》》》CSS技术中的定义分隔条
    【示例1】下面例子设置背景从边框开始显示，也就是从边框外缘以内的区域开始显示。这里为了效果更明显，给整个网页添加了背景颜色。

http://s11/mw690/76855271td8f1f9099bea&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />

    运行后效果如图2所示。

http://s10/mw690/76855271td8f1f8fe2509&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />
    图2  背景从边框开始显示效果图

    如果想让背景从内边距开始显示，也就是从边框以内的区域开始显示，可以修改backgroud-clip属性的属性值为padding-box。修改代码如下。

http://s15/mw690/76855271td8f1f8fe7e7e&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />

    运行后效果如图3所示。图3和图2之间背景显示的区域差了边框宽度那么长，也就是20px。

http://s6/mw690/76855271td8f1f8ef64b5&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />

    图3  背景从内边距开始显示效果图

如果想让背景从内容区域开始显示，可以修改backgroud-clip属性的属性值为content-box。修改代码如下。http://s12/mw690/76855271td8f1f8e355eb&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />

    运行后效果如图4所示。

http://s5/mw690/76855271td8f1f8d50ec4&6903中设置背景图片的显示区域" TITLE="CSS 3中设置背景图片的显示区域" />

    图4  背景从内容区域开始显示效果图

    关键字：CSS 3中设置背景图片的显示区域   CSS     设置背景图片的显示区域