CSS3 Background 属性介绍

发布时间：2019-07-07 14:16:57编辑：auto阅读（2405）

与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> 

所用的背景图：



效果如图：



还是由于当前的兼容问题，在做美化的过程中，要尽量做到平稳过度

虽说标准尚未出台，不过先熟悉熟悉总是好事 :-)

 

 

 

关键字：