背景图片大小设置

语法：background-size:宽度 高度； 作用：设置背景图片大小 取值： 取值 场景 数字+px 简单方便
    
    
    
 ，常用 百分比 相当于当前盒子自身的宽高百分比 contain 包含     


     


     


     ，将背景图片等比例缩放 




 




 




 




，直到不会超出盒子的最大 cover 覆盖

   

   

   

，将背景图片等比例缩放     

     

     

     ，直到刚好填满整个盒子没有空白

1.设置一个盒子赋予宽（400px）高（300px）  




  




  




  



，并设置边框便于观察


  


  


  


，将原图插入盒子中

2.第一种取值（数字+px）：

使用数字＋px 给图片设置和盒子一样的宽高 background-size: 400px 300px;

3.第二种取值（百分比）：

使用百分比给图片设置宽高都为90% background-size: 90% 90%;

4.第三种取值（contain）：

使用 contain 将背景图片等比例缩放     
     
     
    ，直到不会超出盒子的最大 background-size: contain;

5.第四种取值（cover）：

使用 cover 将背景图片等比例缩放   




   




   




   


，直到刚好填满整个盒子没有空白 background-size: cover;