vue-cli如何解决背景图片无法铺满整个页面的问题

最新推荐文章于 2023-07-03 16:34:33 发布
最新推荐文章于 2023-07-03 16:34:33 发布
阅读量2.2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46957313/article/details/106631323
版权

1.今天在做后台管理项目的时候遇到了一个问题，就是背景图片无法铺满整个屏幕，这就很让人头疼
在这里插入图片描述
如何解决这个问题呢，我们需要给他加上 position: fixed;让它脱离文档流，就可以了，这个问题就解决啦，是不是很简单呢

在这里插入图片描述
原谅我布局有点丑，这只是个开始，希望你们不要嫌弃啊 ~~哭唧唧

菜的抠脚....
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli中打包图片路径错误的解决方法
08-29
但是，在使用vue-cli打包图片时，可能会出现图片路径错误的問題，这篇文章将为大家介绍如何解决这个问题。 问题描述 在使用vue-cli构建项目时，第一次打包部署到服务器上时，可能会出现图片加载不出来的情况。这种...
VUE解决背景图片没有铺满的问题
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-05 6394
我刚下载的VUE-cli框架，但是设置背景图片的时候发现，在App.vue文件中设置style的风格css即可，红色部分其实就是网上抄来的，这就是背景图片的设置 但是我又发现了，图片没有铺满。 类似图片中的这样，上面和左边都会留个缝隙。 我找了半天都没有找到，直到看到：解决vue背景无法铺满全屏的问题 - 简书 这个说的情况跟我一样，只不过它是在index.html，我的工程里都没有，但是一葫芦画瓢，我在App.vue文件添加上body即可： 发现一家解决了背景图片铺满的问题了。 ..
Vue 页面背景颜色铺不满【解决方案】
czboy
03-07 4811
最近在用Vue做微信公众号，发现页面背景颜色铺不满，自己在网上找了很久，终于找到了解决方案，这里分享给大家！下面样式是铺不满的： 铺不满 这里是解决方案： 铺满 ...
创建vue项目，页面四周都有白边，无法铺满整个页面
m0_60967241的博客
04-27 5033
创建了vue项目，但是发现每个页面四周都有白边
vue添加背景图，只显示一半问题解决
Q_xyue的博客
07-01 3634
一：如何添加背景图 1：在页面所有div最外层写一个<div class="shopping-classify">.....</div> 在我的代码中如下 <div class="shopping-classify"> <div> .....其他内容 </div> </div> 2：在<style>内写 {注意，一定放在style样式地最外层} </style> //登录背景图 .shoppi.
vue组件背景图片铺不满的问题
weixin_67512100的博客
07-03 1547
刚开始使用vue组件写网页时，经常会出现添加的背景图片不显示，或者只显示一部分。很简单只需要添加两行代码。但是经常会出现这种缝。
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page ...
vue-cli-plugin-auto-routing:自动解决页面和布局路由
05-02
vue-cli-plugin-自动路由 提供自动路由功能的Vue CLI插件。概述确保您处于由Vue CLI> = v3生成的项目中。 您可以通过运行以下命令来安装此插件： # If you did not install router plugin yet$ vue add router# ...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
position为fixed的元素，高度不是满屏；transform对定位元素的影响；绝对定位的元素，高度不是全屏；
xiao_yu_liu的博客
12-20 2035
今天的开发中，遇到一个问题，div使用绝对定位，但是高度却不是全屏幕。 代码如下： div{ position:fixed; top:0; left:0 bottom:0; right:0; width:100vw; height:100vh; } 效果图如下： 结果： 经查证，该元素的父元素，使用了transform，也在网络上查证，并没有找到合适的官方文档，网络上也有码友遇到此类问题，但是没有有力的文档。 解决： 1、改写父元素的transform，使用其他方式，完成transform
svg图片无法铺满的问题
weixin_44100002的博客
06-01 894
svg文件打开在svg标签加上 preserveAspectRatio=“none meet”
图片无法撑满整个屏幕或div
大大大鸡腿的博客
07-12 1441
原图： 只引入图片： body{ background: url(2.jpg); } 加上如下代码： body{ background: url(2.jpg); /* 引入2.jpg，不重复平铺，水平垂直居中 */ background-size: cover; /* 放大背景图片，使其覆盖整个背景区域，但可能有些部分无法显示 */ background-a
解决固定定位无法覆盖的层叠问题
a1071626267的博客
06-11 1415
解决固定定位无法覆盖的层叠问题
CSS样式中解决背景图片不能完美填充页面(页面高度很高)
YodgeGGG的博客
12-07 1953
先上个图 这里我的图片是1920x1080像素的 但页面高度有2000像素左右，想要图片可以完美填充页面背景 只需写入以下代码 body { margin: 0; padding: 0; background-image: url(assets/img/bg15.png); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } 重中之重就
【vue3+vue.config.js引用svg(含解决use长宽为0问题)】
weixin_46536395的博客
01-06 1180
vue3+vue.config.js引用svg(含解决use长宽为0问题)
关于Css中position属性fixed失效
Miss_Jie Blog
11-17 1446
关于Css中position属性fixed失效 该元素的父元素用到了transform属性，导致position: fixed失效，去掉transform之后就I可以了
移动端常见问题解决方案（position:fixed失效、overflow:auto导致滚动不流畅、input获得焦点软键盘弹出时position:fixed的footer遮挡内容区域等）
Flowering_Vivian的博客
09-23 2344
移动端弹层水平垂直居中方法 .layer{ position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transfor
前端工程师面试题详解(二)
呵呵哒!的博客
09-29 1896
前端工程师面试题详解(二)
serve vue-cli-service serve build vue-cli-service build lint vue-cli-service lint
最新发布
09-08
具体来说，vue-cli-service serve用于在开发环境下运行项目，vue-cli-service build用于打包项目，vue-cli-service lint用于检查项目代码风格。这些命令是在项目的package.json文件中定义的脚本。例如，可以通过运行...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值