CSS基础背景图片的相关属性

属性名：

 background-size: 宽度 高度;

属性值	说明
数字+px	简单方便，常用
百分比	相当于盒子自身的百分比，如：百分百，就是就算是图片变形也要显示
contain	动比例缩放，但不会超出盒子最大，不会变形，有可能留白
cover	覆盖，等比例缩放，不会留白

属性1：因为盒子和图片不一样，容易拉伸变形

     代码:

.one{

width: 400px;

height: 300px;

border:1px solid #000;

background: url(./images/sprites.png) no-repeat /*不让图片在盒子里平铺*/;

background-size: 400px 300px;

}

效果图：

属性二：因为盒子和图片不一样，容易拉伸变形，具体根据情况而定

代码结构:

.one{

width: 400px;

height: 300px;

border:1px solid #000;

background: url(./images/sprites.png) no-repeat /*不让图片在盒子里平铺*/;

background-size: 100% 100%;

}

效果跟属性一，一样

属性三:
  代码结构:

.one{

width: 400px;

height: 300px;

border:1px solid #000;

background: url(./images/sprites.png) no-repeat /*不让图片在盒子里平铺*/;

background-size: contain;

}

效果图

属性四：

  结构代码:

.one{

width: 400px;

height: 300px;

border:1px solid #000;

background: url(./images/sprites.png) no-repeat /*不让图片在盒子里平铺*/;

background-size: cover;

}

效果图，图片没有完全显示：

background连写格式:
   background： color image  repeat position/size；
注意：如果连写和单写同时出现，连写写在单写的前面或者用连写写在一起，如果顺序反了，会将其覆盖

巴特西