Vue项目设置全屏背景图片上方有白边的问题

最新推荐文章于 2024-03-28 09:54:56 发布
最新推荐文章于 2024-03-28 09:54:56 发布
阅读量3.9k 收藏 8
点赞数 9
文章标签： css vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47350495/article/details/118863667
版权

今天在Vue框架下写一个登录页面想弄个全屏的背景，添加完背景图片之后发现上方有一个小小的白边，并且添加完成之后整个页面是可以稍微上下滑动的，非常的不美观。

 就是这个非常小的白边，让整个页面都可以滑动

联想到之前设置全屏背景图都需要给body设置  margin: 0，于是检查了一下白边的元素

 

 发现这个元素之后只需要进入public的index.html，然后在其body里面设置 margin: 0就可以啦

 之后背景图片就会完整覆盖整个页面了

陈陈陈陈嘉
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
vue设置背景占满全屏
qq_33581509的博客
06-26 1万+
vue设置背景占满全屏 示例：如下图的顶部和左侧的空白区域： 解决背景图片占满全屏的问题如下： 1、首选要新建一个全局样式表global.css文件，代码如下： /* 全局样式表 */ html, body, #app { height: 100%; margin: 0; padding: 0; } 2、在项目入口文件导入全局样式表，代码如下： import './assets/css/global.css' 3、然后在style中设置如下代码： .login{ backg
Vue背景图片去白边
HKing147的博客
08-29 907
Vue设置背景图片四周出现白边。
创建vue项目，页面四周都有白边，无法铺满整个页面
m0_60967241的博客
04-27 5120
创建了vue项目，但是发现每个页面四周都有白边
VUE解决背景图片没有铺满的问题
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-05 6443
我刚下载的VUE-cli框架，但是设置背景图片的时候发现，在App.vue文件中设置style的风格css即可，红色部分其实就是网上抄来的，这就是背景图片的设置 但是我又发现了，图片没有铺满。 类似图片中的这样，上面和左边都会留个缝隙。 我找了半天都没有找到，直到看到：解决vue背景无法铺满全屏的问题 - 简书 这个说的情况跟我一样，只不过它是在index.html，我的工程里都没有，但是一葫芦画瓢，我在App.vue文件添加上body即可： 发现一家解决了背景图片铺满的问题了。 ..
Vue单文件中引入背景图片时，四周有空白的问题
划水的搬运工
12-19 3921
Vue单文件中引入背景图片时，四周有空白的问题问题背景初始引入背景图更新后的背景图设置 问题背景 近期公司有个管理系统前后端分离，但是前端人员不够，只能我们后端来凑，而在前端的开发过程中总是遇到一些特简单却很尴尬的问题，就像这次在vue的单文件中引入背景图，但是却出现四周有空白的问题。 初始引入背景图 由于之前接触vue比较少，所以baidu和google一些资料之后，作出了第一版，代码如下 &...
Vue框架设置背景图后，四周有白边的问题（使用backgroundImage）
L_WalkingPig的博客
04-21 7462
先说给登录页面设置背景图片login.vue： <template> <div :style="loginImageDiv"> <!--登录页的其他html部分--> </div> </template> <script> data(){ return{ loginImageD...
尝试解决vue网页的偏移/白边
weixin_69988447的博客
03-18 780
自己找的方法，不知道会不会有隐患，非学习目的慎用
Vue去除添加背景后出现的白边
qq_34661750的博客
06-04 519
1.css中去除默认填充 *{ margin: 0; padding: 0; } 2.改变背景图片大小 .page { background: url("~@assets/img/page/background.png") no-repeat center/101% 101%; }
解决vue页面四周有白边的问题
liuxy_236的博客
12-19 6865
在export default的代码中添加如下代码，设置body的属性margin:0和padding:0 beforeRouteEnter(to, from, next) { // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题 document.querySelector('body').setAttribute('style', ...
直播平台制作，Vue去除添加背景后出现的白边
云豹网络科技
07-26 391
以上就是直播平台制作，Vue去除添加背景后出现的白边，更多内容欢迎关注之后的文章。直播平台制作，Vue去除添加背景后出现的白边。1.css中去除默认填充。2.改变背景图片大小。
vue div设置背景图片
weixin_44531304的博客
05-25 8532
布局: <div class="middle" :style="backgroundDiv"> <img src="./images/a.png" style="width: auto; height: 40px;"> </div> 数据： data() { return { backgroundDiv: { ...
vue如何让一个div占满全屏_使用Vue-cli 中为单独页面设置背景图片铺满全屏
weixin_39760434的博客
12-19 6494
啥也不说了，大家还是直接看代码吧~import meadiaurl from '../../api/mediaurl'export default {name: "logo"#logo{background: url("../../assets/images/Login.png");background-size: 100% 100%;height: 100%;}如果像以上代码写，高度为100%时...
vue项目中设置背景图(背景图适应电脑屏无滑动条)
weixin_42860747的博客
07-27 1780
vue项目中如何设置背景图并让背景图适应不同尺寸和分辨率的电脑屏 <div class="background"> <img :src="imgSrc" width="100%" height="100%" alt/> </div> 给img标签的src属性绑定值imgSrc,设置宽和高都为100% // 背景图 imgSrc: require("../assets/loginBackground.jpg"), 在data中对imgSrc进行取值 .backg
vue项目设置服务器地址,vue项目配置后端服务器地址
weixin_28831341的博客
08-09 8571
vue项目配置后端服务器地址 内容精选换一换更新后端云服务器，可修改字段为后端云服务器的名称和权重，可以为性能好的服务器设置更大的权重，用来接收更多的流量。如果后端云服务器关联的负载均衡器的provisioning status不是ACTIVE，则不能更新该后端云服务器。PUT /v2.0/lbaas/pools/{pool_id}/members/{member_id}请求样例为指定的VPC通道...
vue——去除白色边框
zhiqingxue的博客
12-07 3144
Vue去白边
使用vue开发项目页面顶部出现空白区域
Giraffe0615的博客
01-01 2487
原因： HTML元素默认样式: 　　1.body　　margin:8px; 　　2.ul　　 padding:40px; 　　3.p　　　　margin:16px; 解决办法： 在当前页面css部分添加： <style lang="scss"> *{ margin:0; padding:0; border:0 } </style> ...
大屏可视化留白解决方案
qq_59625204的博客
07-13 1230
,},},methods: {// 分别计算X轴和Y轴的缩放比例},// 获取到缩放比，设置它}, 500),},},</script>left: 50%;top: 50%;</style>
vue添加背景及页面留白处理方法
奈&何.
08-12 1913
1，顶部留白情况 处理方式： 在APP.vue文件中的style中 #app{}样式中去掉margin-top: 60px;即可 效果图如图所示 发现页面顶部和左侧还是有小的留白 这是只需要在APP.vue文件中的style中添加 *{ padding: 0; margin: 0; } 即可 ...
解决vue3项目中四周留白的原因
最新发布
qq_51554230的博客
03-28 752
解决vue3项目中body默认属性有margin:8px;
vue设置全屏背景图片
05-03
你可以在Vue组件中使用CSS样式来设置全屏背景图片。这里有一个示例代码： ```html <!-- 页面内容 --> .full-screen-background { background-image: url('/path/to/image.jpg'); background-repeat: no-...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值