vue 背景图片铺满整个屏幕（适配所有机型）

固定一屏大小,内容超出一屏会显示不全,不可滚动查看内容

html:
<div id="home"></div>
 
css:
<style>
#home {
  width: 100%;
  height: 100vh;
  background: url("~@/images/home/h_bg.png") center center no-repeat;//本地图片
  background-size: 100% 100%;
  position: fixed;//固定定位
}
</style>

背景全屏，内容完全显示且可滚动查看

 

html:
<div id="home"></div>
 
css:
<style>
#home {
  width: 100%;
  height: 100vh;
  background: url("~@/images/home/h_bg.png") center center no-repeat;
  background-size: 100% 100%;
  position:absolute;//绝对定位
}
</style>

 

背景全屏，不用定位内容完全显示且可滚动查看

 

html:
<div id="home"></div>
 
css:
<style>
#home {
  width: 100%;
  min-height: 100vh;
  background: url("~@/images/home/h_bg.png") center center no-repeat;
  background-size: 100% 100%;
  
}
</style>