微客导航 » 文章资讯 » 使用Vue-cli 中为单独页面设置背景图片铺满全屏

使用Vue-cli 中为单独页面设置背景图片铺满全屏

2023-07-20 15:12:03 167

啥也不说了，大家还是直接看代码吧~





#logo{
background:url("../../assets/images/Login.png");
background-size:100%100%;
height:100%;
}

如果像以上代码写，高度为100%时，会发现背景图片只是内容撑起来的，却不能使整个屏幕铺满背景图；

解决方案：

我们要让#logo脱离文档流，为他添加个fixed属性

#logo{
background:url("../../assets/images/Login.png");
background-size:100%100%;
height:100%;
position:fixed;
width:100%
}

补充知识：vue实现全屏显示和全屏按钮svg图

1，第一步安装screenfull

npminstall--savescreenfull

2，新建screenfull.vue组件，




.screenfull-svg{
width:20px;
height:20px;
cursor:pointer;
fill:red;
}

3，在需要的组件引入该组件即可

以上这篇使用Vue-cli中为单独页面设置背景图片铺满全屏就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。