在Vue中实现全屏背景图片
可以使用absolute或relative,然后height设置成auto自动
·
在Vue中实现全屏背景图片
解决方案
background: url("../xx/images/图片名字.jpg"); //这里的地址是用你项目中图片所在的路径为准
background-repeat: no-repeat;//将图片样式不重复
background-size: 100% 100%; //设置图片大小
position: fixed; /* 充满全屏 */
height: 100%; //设置div高度
width: 100%; //设置div宽度
上述css代码请放在你的div中的id选择器中。
如:
<template>
<div id="building">
<div id="app">
<router-view>
</router-view>
</div>
</div>
</template>
在上述代码中,我们要放在building中
#building{
background:url("./assets/Books.png");
width:100%;
height:100%;
position:fixed;
background-size:100% 100%;
}
例:
缺点:因为全局背景设置成fixed固定定位,所以如果页面数据太多且没有设置分页或滚动条时,则无法进行下滑操作
临时解决方案:可以使用absolute或relative,然后height设置成auto自动
彻底解决方案:
前端解决:数据所在的div或table设置滚动条
后端解决:加数据分页且前端渲染。
更多推荐
已为社区贡献2条内容
所有评论(0)