盒子模型-背景

背景

背景颜色

background-color: #FF0000;

背景图片

background-image: url(../img/img/pic2.jpg);

背景重复方式

background-repeat: repeat;      //水平垂直均重复
background-repeat: repeat-x;    //水平重复
background-repeat: repeat-y;    //垂直重复
background-repeat: no-repeat;   //不重复 

图片的位置

background-position: right top;

图片大小

background-size: 200px;
background-size: 50%;
background-size: 100%;
background-size: contain;  
background-size: cover;

background-size: contain; 包含

把背景图片等比例扩展至最大尺寸，以使背景图片的宽度和高度完全适应内容区域，可能会出现空白

background-size: cover; 覆盖

把背景图片等比例扩大至足够大，以使背景图片铺满整个背景区域，可能会裁剪图片

 背景图片渲染位置

background-origin: padding-box;     //从内边距的padding位置渲染
background-origin: content-box;     //从内容区域渲染
background-origin: border-box;      //从border位置渲染

 背景图片是否固定

width: 100%;
height: 510px;
background-image: url(../img/img/bg.gif);
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;

fixed   固定不动 

 精灵图

可以将一个网页内所有图片都包含到一张大图中去，图片就不会像以前那样一幅一幅地慢慢显示出来了。

优点 

能很好地减少网页的http请求

能减少图片的字节，3张图片合并成1张图片的字节总是小于这3张图片的字节总和

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了

更换风格方便

缺点 

在图片合并的时候，要留好足够的空间，不然很容易出现背景断裂

要通过工具测量计算每一个背景单元的精确位置

维护比较麻烦