CSS 3新增的背景相关属性

　　CSS 3新增了如下几个背景相关属性。
　　➢　background-clip：该属性用于设置背景覆盖的范围。
　　➢　background-origin：该属性用于设置背景覆盖的起点。该属性与前面介绍的background-position有些相似。
　　➢　background-size：该属性用于设置背景图片的大小。该属性由两个值组成，分别代表图片的宽度、高度。宽度、高度支持如下3种写法。
　　□　长度值，例如20px，指定背景图片的宽或高为20px。
　　□　百分比，例如80%，指定背景图片的宽或高为它所在组件的宽或高的80%。
　　□　auto，指定背景图片保持纵横比缩放。宽度、高度只能有一个被指定为auto，表明宽度、高度会以保持纵横比的方式自动计算出来。
　　对于一个HTML组件来说，它由元素内容区（content）、内补丁区（padding）、边框区（border）和外补丁区（margin）组成，下图显示了HTML组件的区域分布。


IT料理

　　在CSS 2中，元素的背景覆盖区域为内补丁区（padding）和内容区（content）；在CSS 3中则可以指定背景需要覆盖哪个范围。背景的覆盖范围由background-clip属性指定，该属性支持如下几个属性值。
　　➢　border-box：指定背景覆盖边框区（border）、内补丁区（padding）、内容区（content）。
　　➢　no-clip：指定背景覆盖边框区（border）、内补丁区（padding）、内容区（content）。
　　➢　padding-box：指定背景覆盖内补丁区（padding）、内容区（content）。
　　➢　content-box：指定背景只覆盖内容区（content）。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        border:10px dotted #444;
        padding: 12px;
        height: 30px;
        width: 200px;
    }
    </style>
</head>  
<body>  
background-image:url(wjc.gif)  
<div style="background-image:url(wjc.gif);">测试文字</div>  
background-image:url(wjc.gif);background-clip:no-clip;  
<div style="background-image:url(wjc.gif);  
background-clip:no-clip;">测试文字</div>  
background-image:url(wjc.gif);background-clip:padding-box;  
<div style="background-image:url(wjc.gif);  
background-clip:padding-box;">测试文字</div>  
background-image:url(wjc.gif);background-clip:content-box;  
<div style="background-image:url(wjc.gif);  
background-clip:content-box;">测试文字</div>  
</body>  
</html>
图片


IT料理

调节背景图片的大小

　　在CSS 3以前的时代，当我们为HTML元素设置背景图片，该图片“铺”到该组件上时，图片的大小总是该图片的原始大小。CSS 3的出现改变了这种现状，background-size属性可控制背景图片的大小。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div{
        border:1px solid #000;
        height: 50px;
        width: 200px;
    }
    </style>
</head>  
<body>  
background-image:url(wjc.gif)  
<div style="background-image:url(wjc.gif);"></div>  
background-image:url(wjc.gif);background-size:100% 80%;  
(背景图片的宽度与组件宽度相同、高度为组件高度的80％)
<div style="background-image:url(wjc.gif);  
-webkit-background-size:100% 80%;background-size:100% 80%;"></div>
background-image:url(wjc.gif);background-size:20% auto;  
(背景图片的宽度为组件宽度20%、高度保持纵横比缩放)
<div style="background-image:url(wjc.gif);  
-webkit-background-size:20% auto;background-size:20% auto;"></div>
background-image:url(wjc.gif);background-size:auto 50%;  
(背景图片的宽度保持纵横比缩放、高度为组件宽度50%)
<div style="background-image:url(wjc.gif);  
-webkit-background-size:auto 50%;background-size:auto 50%;"></div>
background-image:url(wjc.gif);;background-size:60px 30px;  
(背景图片的宽度为60px、高度为30px)
<div style="background-image:url(wjc.gif);  
-webkit-background-size:60px 30px;background-size:60px 30px;"></div>
background-image:url(wjc.gif);background-size:40px auto;  
(背景图片的宽度为40px，高度保持纵横比缩放)
<div style="background-image:url(wjc.gif);  
-webkit-background-size:40px auto;background-size:40px auto;"></div>
background-image:url(wjc.gif);background-size:auto 50%;  
(背景图片的宽度保持纵横比缩放、高度为组件宽度20px)
<div style="background-image:url(wjc.gif);  
-webkit-background-size:auto 20px;background-size:auto 20px;"></div>
</body>  
</html>

CSS 3新增的多背景图片

　　在CSS 3以前，每个组件只能指定一种背景图片，如果同时指定了背景颜色和背景图片，那么背景图片会覆盖背景颜色。CSS 3的出现改变了这种局面，CSS 3允许同时指定多个背景图片，这些背景图片会依次覆盖。
　　CSS 3并没有为多背景图片支持提供额外的属性，多背景图片依然是通过background-image、background-repeat、background-position、background-size等属性来控制的，只是CSS 3允许指定多个属性值（多个属性值之间以英文逗号隔开），这样即可实现多背景图片的效果。如下页面示范了多背景图片的效果。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>背景相关属性</title>
    <style type="text/css">
    /* 为div元素增加边框 */
    div#div1{
        border:1px solid #000;
        height: 160px;
        width: 500px;
        /* 依次指定了3个背景图片 */
        background-image: url(snow.gif), url(face.gif), url(sky.gif);
        /* 依次指定了3个背景图片的重复方式：纵向重复、横向重复、两个方向重复 */
        background-repeat: repeat-y, repeat-x, repeat;
        /* 依次指定了3个背景图片的位置 */
        background-position: center top, left center, left top;
    }
    </style>
</head>  
<body>  
<div id="div1"></div>  
</body>  
</html>
图片


IT料理 IT料理 IT料理

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。