使用Vue-cli 中为单独页面设置背景图片铺满全屏
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
啥也不说了,大家还是直接看代码吧~
<template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url("../../assets/images/Login.png"); background-size: 100% 100%; height: 100%; } </style>
如果像以上代码写,高度为100%时,会发现背景图片只是内容撑起来的,却不能使整个屏幕铺满背景图;
解决方案:
我们要让#logo脱离文档流,为他添加个fixed属性
#logo{ background: url("../../assets/images/Login.png"); background-size: 100% 100%; height: 100%; position: fixed; width: 100% }
补充知识:vue 实现全屏显示和全屏按钮svg图
1,第一步安装screenfull
npm install --save screenfull
2, 新建screenfull.vue组件,
<template> <div> <svg t="1508738709248" class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://.w3./2000/svg" p-id="2069" xmlns:xlink="http://.w3./1999/xlink" width="32" height="32" @click="click"> <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z" p-id="2070"/> <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z" p-id="2071"/> <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z" p-id="2072"/> <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z" p-id="2073"/> </svg> </div> </template> <script> import screenfull from 'screenfull' //引入screenfull export default { name: 'Screenfull', props: { width: { type: Number, default: 22 }, height: { type: Number, default: 22 }, fill: { type: String, default: '#48576a' } }, data(){ return { isFullscreen: false //不可少 } }, methods: { click(){ if(!screenfull.enabled){ this.$message({ message: '你的浏览器不支持全屏', type: 'warning' }) return false } screenfull.toggle() } } } </script> <style scoped> .screenfull-svg { width: 20px; height: 20px; cursor: pointer; fill: red; } </style>
3, 在需要的组件引入该组件即可
以上这篇使用Vue-cli 中为单独页面设置背景图片铺满全屏就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程