问题背景

近期公司有个管理系统前后端分离，但是前端人员不够，只能我们后端来凑，而在前端的开发过程中总是遇到一些特简单却很尴尬的问题，就像这次在vue的单文件中引入背景图，但是却出现四周有空白的问题。

初始引入背景图

由于之前接触vue比较少，所以baidu和google一些资料之后，作出了第一版，代码如下

<template><div><img src="../imgs/login.jpg"></div>
</template>

这里只在template下配置了img标签，其他的js和css都没有配置，这样的效果图如下：

背景图四周有空白，且如果背景图片过大，右侧会有滑动条，这样做出来的网站的背景图并不理想。
之后又是一顿baidu&google操作，终于找到css的配置，如下。

更新后的背景图设置

上面的template中为最外层的div添加类，并为img设置css格式，在vue单文件中的<style>内添加css配置，代码如下：

 <template><div class="hello"><img src="../imgs/login.jpg" style="width: 100%; height: 100%"></div>
</template><style scoped>
.hello {position: fixed;width: 100%;height: 100%;top: 0px;  // 这里是设置与顶部的距离left: 0px;  // 这里是设置与左边的距离}
</style>

更新后的背景图效果为：

问题解决。

Vue单文件中引入背景图片时，四周有空白的问题相关推荐

怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
Vue或uniapp 中动态绑定背景图片（三种情况）
Vue 中动态绑定背景图片(三种情况)_MrQiuGH的博客-CSDN博客_vue 动态背景图
Vue 单文件中的数据传递
Vue 的单文件组件在使用 Vue 时非常常用,所以我们也会经常遇到组件之间需要传递数据的时候,大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通 ...
如何使用PDF编辑软件在PDF文件中添加背景图片
我们在做Word文档时有时候为了美观会给文档添加一个背景图片,当然了我们做PDF文档时给PDF文档添加一个背景图片也是必不可少的,但是我们应该怎么去给PDF文档添加背景图片呢?今天小编就把自己搜集的信 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
MFC中给基于CFormView的单文档添加背景图片
关于基于CFormView的单文档应用程序,添加一个图片背景的方法之一如下: 下面是利用LoadImage实现.(先在程序目录中添加背景图片back.bmp) 1.在view类中添加类成员变量:(为C ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...

Vue单文件中引入背景图片时，四周有空白的问题

Vue单文件中引入背景图片时，四周有空白的问题

问题背景

初始引入背景图

更新后的背景图设置

Vue单文件中引入背景图片时，四周有空白的问题相关推荐

最新文章

热门文章