css3 背景

 

一、设置元素背景图片的原始起始位置。   

　　语法：background-origin ： border-box | padding-box | content-box;

              参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

              需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

     例如：

 　　　　background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; 

　　　　-moz-background-origin:content-box; 
　　　　-webkit-background-origin:content-box; 
　　　　-khtml-background-origin:content-box; 
　　　　background-origin:content-box;

      

 

 

二、用来将背景图片做适当的裁剪以适应实际需要。

         语法：background-clip ： border-box | padding-box | content-box | no-clip

           参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

         例如：

　　　　　　　　background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
　　　　　　　　background-origin: border-box;
　　　　　　　　background-clip: content-box ;

       

 三、设置背景图片的大小

　　　　语法：background-size: auto | <长度值> | <百分比> | cover | contain

        1、auto：默认值，不改变背景图片的原始高度和宽度；

　　　　2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

　　　　3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

　　　　4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

　　　　5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

        例如：

　　　　　　background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
　　　　　　background-size:cover;

        

四、多重背景  multiple backgrounds