vue 背景图片铺满整个屏幕(适配所有机型)
背景图片铺满整个屏幕(适配所有机型)
·
背景全屏,不用定位内容完全显示且可滚动查看
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>
更多推荐
已为社区贡献4条内容
所有评论(0)