CSS3 Background 属性介绍

原创

乄尐 2012-01-07 15:22:58 博主文章分类：CSS ©著作权

文章标签 css 休闲 background css3 背景属性 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者乄尐的原创作品，请联系作者获取转载授权，否则将追究法律责任

与border类似，ie对新的background属性都是不支持的。多的就不说了，来看看，新的background 属性吧。

1、background-origin 控制背景图片区域
三个取值,由外向内分别为: border-box,padding-box,content-box
默认为padding-box

<style type="text/css"> 
<!-- 
.bg-origin { 
width:250px; border:20px dotted #000; padding:20px; position:relative; 
text-align:center; font-weight:bold; color:#f00;  
background:#ccc url(img/logo.png) no-repeat; 
background-origin:content-box;  
} 
span.bg-padding { position:absolute;top:0; } 
div.bg-content { height:80px; border:1px solid #000; } 
--> 
</style> 
<div class="bg-origin"> 
<span class="bg-padding">padding</span> 
<div class="bg-content">content</div> 
</div>

效果如图

2、background-clip 控制背景图区域,将控制区域外的背景裁切
三个取值,由外向内分别为: border-box,padding-box,content-box
默认取值为border-box

<style type="text/css"> 
<!-- 
.bg-clip { 
width:250px; border:20px dotted #000; padding:20px; position:relative; 
text-align:center; font-weight:bold; color:#f00;  
background:#ccc url(img/logo.png) no-repeat;  
background-clip:content-box;  
} 
span.bg-padding { position:absolute;top:0; } 
div.bg-content { height:80px; border:1px solid #000; } 
--> 
</style> 
<div class="bg-clip"> 
<span class="bg-padding">padding</span> 
<div class="bg-content">content</div> 
</div>

效果如图：

3、background-size 控制背景图片大小，拉伸控制图片
以像素或百分比控制，基于Gecko引擎的火狐浏览器目前尚不支持

<style type="text/css"> 
<!-- 
.bg-size { 
border: 1px solid #CCCCCC; padding:90px 5px 10px;  
background:url(img/logo.png) no-repeat ;  
-webkit-background-size: 100% 80px;  
-o-background-size: 100% 80px; 
} 
--> 
</style> 
<div class="bg-size">这里的<code>background-size: 100% 80px</code> 背景图片将与DIV一样宽，高为80px。</div>

谷歌浏览器下效果：

4、Multiple backgrounds
background 包含一下子属性
background-p_w_picpath ：指定或检索对象的背景图像。
background-origin ：指定背景的显示区域。参见background-origin
background-clip ：指定背景的裁剪区域。参见background-clip
background-repeat ：设置或检索对象的背景图像是否及如何重复铺排。
background-size ：指定背景图片的大小。参见background-size
background-position ：设置或检索对象的背景图像位置。
CSS3手册中有如下介绍：

CSS3中在容器的多层背景，各子属性与逗号来分隔值，如果指定的值，如下： 
background-p_w_picpath: w1, w2, w3,…, wM 
background-repeat: x1, x2, x3,…, xR 
background-size: y1, y2, y3,…, yS 
background-position: s1, s2, s3,…, sP

各个控制数值一一对应
这边以一个简单的上下左右控制的综合背景图为例

<style type="text/css"> 
<!-- 
.mult-bg { 
background-p_w_picpath: url(img/bgt.png),url(img/bgr.png),url(img/bgb.png),url(img/bgl.png);  
background-position: center top, right center, center bottom,left center; 
background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;width:260px;padding:20px; 
} 
--> 
</style>  
<div class="mult-bg"><p>多背景示范容器</p></div>