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>

 

posted @ 2022-08-23 10:53  性野喜悲  阅读(1446)  评论(0)    收藏  举报