使用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。
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指