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；
注意：如果连写和单写同时出现，连写写在单写的前面或者用连写写在一起，如果顺序反了，会将其覆盖