vue-cli脚手架实现全屏背景图

今天在vue-cli脚手架项目中，遇到实现在某个路由中全屏背景图片。
（1）第一次的代码是这样的，问题：图片还是不能实现全屏展示。

.login {width: 100%;height: 100%;background-image: url(../../public/images/login_bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;
}

（2）使用position：fixed脱离文档流解决了全屏背景图，出现问题：当屏幕上下缩放时，时没有滚动条的，相当于overflow:hidden，缺少滚动条。

.login {position: fixed;width: 100%;height: 100%;background-image: url(../../public/images/login_bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;
}

（3）即能全屏展示背景图，屏幕缩放又有滚动条。完整代码

.login {top: 0;bottom: 0;position: fixed;overflow-y:scroll; overflow-x:hidden;width: 100%;height: 100%;background-image: url(../../public/images/login_bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;
}

vue-cli脚手架实现全屏背景图相关推荐

全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
uniapp小程序开发设置系统状态栏高度、全屏背景图设置
效果: uniapp小程序开发设置系统状态栏高度/全屏背景图设置 <view class="login"><view class="status_bar ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
去除微信小程序导航栏存在，添加全屏背景图
单页面下不需要window 直接在.json文件中 {"navigationBarBackgroundColor": "#ffffff","navig ...
全屏背景图移动端滚动时白底问题
最近响应式项目移动端遇到一个问题,页面使用的全屏的背景图片,但当它到了移动端需要滚动的时候,往下面一滚动,第二屏等会出现白底,后来让全屏背景图片固定了,再怎么滚动都不影响,解决掉了该尴尬问题. bod ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...
flutter全屏背景图(包括appbar和状态栏)以及沉浸状态栏的设置
设置背景图还是挺简单的,直接container里加个decration然后加个图片就行了,就像这样 import 'package:flutter/material.dart';void main() ...
KSO-纯CSS全屏图片,全屏背景图，自适应
个人目前在项目中使用的全屏图片 display: flex;overflow-x: hidden;position: relative;height: 100%;width: 100%;//backg ...

vue-cli脚手架实现全屏背景图

vue-cli脚手架实现全屏背景图相关推荐

最新文章

热门文章