这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
啥也不说了，大家还是直接看代码吧~
<div id="logo"> </div> #logo{ background: url("../../assets/images/Login.png-600"); background-si<strong style="color:transparent">来2源gaodaima#com搞(代@码&网</strong>ze: 100% 100%; height: 100%; }
如果像以上代码写，高度为100%时，会发现背景图片只是内容撑起来的，却不能使整个屏幕铺满背景图；
解决方案：
我们要让#logo脱离文档流，为他添加个fixed属性
#logo{ background: url("../../assets/images/Login.png-600"); background-size: 100% 100%; height: 100%; position: fixed; width: 100% }
补充知识：vue 实现全屏显示和全屏按钮svg图
1，第一步安装screenfull
npm install –save screenfull
2， 新建screenfull.vue组件，
<div> </div> .screenfull-svg { width: 20px; height: 20px; cursor: pointer; fill: red; }
3， 在需要的组件引入该组件即可
以上就是使用Vue-cli 中为单独页面设置背景图片铺满全屏的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用Vue-cli 中为单独页面设置背景图片铺满全屏
转载请注明原文链接：使用Vue-cli 中为单独页面设置背景图片铺满全屏
