背景图片如何自适应屏幕

时间：2024-11-16 17:59:41

  自己比较头疼的问题，网上搜了好多资料，大概整理了一下

1. 直接设置CSS样式达到目的

.bg{
  background-image: url(../images/);//此为图片地址
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}

   在以上代码中，background-size: cover；是对背景图进行等比例拉伸，仍然存在图片显示不完全的问题。

      background-size: 100% 100%；是对背景图的宽拉伸至屏幕宽度，高拉伸为屏幕高度，即非等比例拉伸。

   该方法虽然较为简单，但存在问题：对图片进行拉伸成都较大时会使图片失真。

2. 利用  css @media

  
  

   
   @media only screen and (min-width: 1024px){ //当分辨率width >= 1024px 时使用1.jpg作为背景图片
  
  

  
  

   
       .bg{
  
  

  
  

   
           background:url(../images/) no-repeat;
  
  

  
  

   
       }
  
  

  
  

   
   }
  
  

  
  

   
   @media only screen and (min-width: 400px) and (max-width: 1024px){  //当分辨率400px < width < 1024px 时使用2.jpg作为背景图片
  
  

  
  

   
       .bg{
  
  

  
  

   
           background:url(../images/) no-repeat;
  
  

  
  

   
       }
  
  

  
  

   
   }
  
  

  
  

   
   @media only screen and (mmax-width: 400px) {  //当分辨率width =< 400px 时使用3.jpg作为背景图片
  
  

  
  

   
       .bg{
  
  

  
  

   
           background:url(../images/) no-repeat;
  
  

  
  

   
       }
  
  

  
  

   
   }

  通过获取当前屏幕的分辨率，选择不同分辨率对应的样式。

 可以简单理解为：提前做好几张不同尺寸的背景图片，在一定分辨率范围内使用某一尺寸的图片。

相关文章