解决vue背景无法铺满全屏的问题

今天新建了个vue项目,想弄一个顶部铺满屏幕的图片,结果发现无论怎么调,都无法完全铺满屏幕。

image

排查思路如下:

1.检查视口viewport

检查index.html的头部是否正确设置了视口,使内容展示自适应屏幕的大小。

我的配置:


这里没有问题。

2.检查element-ui引入

我的配置

import ElementUIfrom 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI

这里我一度怀疑是element-ui的默认样式导致的问题,看了半天我引入的css文件,没能找到问题。

3. 找到问题-index.html自带样式

后来经过多方查找,原来是index.html的body自带样式,在该文件的头部写如下自定义样式。

    

问题解决:


image.png

你可能感兴趣的:(解决vue背景无法铺满全屏的问题)