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

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>

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

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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐