解决方案
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设置滚动条
后端解决:加数据分页且前端渲染。