CSS3对背景图片的裁剪及尺寸和位置的设定方法

背景裁剪

</div>

1. background-clip:border-box|padding-box|content-box|text  

</div> </div>

用于指定background是否包含content之外的border,padding。默认值为border-box，即background从包含border在内的地方开始渲染，IE的默认表现也等同于border-box
背景从border(即包括border在内)开始绘制（渲染）

</div>

1. #background-clip-border{   
2.  -moz-background-clip:border-box;           /* For Firefox */  
3.  -webkit-background-clip:border-box;        /* For Chrome, Safari */  
4.  -o-background-clip:border-box;             /* For Opera */  
5.  -ms-background-clip:border-box;            /* For IE */  
6.  background-clip:border-box;                /* For Future */  
7. }  

</div> </div>

背景从padding(即包括padding在内)开始绘制：

</div>

1. #background-clip-padding{   
2.  -moz-background-clip:padding-box;           /* For Firefox */  
3.  -webkit-background-clip:padding-box;        /* For Chrome, Safari */  
4.  -o-background-clip:padding-box;             /* For Opera */  
5.  -ms-background-clip:padding-box;            /* For IE */  
6.  background-clip:padding-box;                /* For Future */  
7. }  

</div> </div>

背景从content(即内容部分)开始绘制：

</div>

1. #background-clip-content{   
2.  -moz-background-clip:content-box;           /* For Firefox */  
3.  -webkit-background-clip:content-box;        /* For Chrome, Safari */  
4.  -o-background-clip:content-box;             /* For Opera */  
5.  -ms-background-clip:content-box;            /* For IE */  
6.  background-clip:content-box;                /* For Future */  
7. }  

</div> </div>

将背景裁剪作为文本的填充色：