vue设置背景占满全屏

Posted 2021-06-30 w1990end

vue设置背景占满全屏

示例：如下图的顶部和左侧的画红线的区域：

解决背景图片占满全屏的问题如下：
1、首选要新建一个全局样式表global.css文件，代码如下：

/* 全局样式表 */
html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}

2、在项目入口文件main.js中导入全局样式表，代码如下：

import './assets/css/global.css'

3、然后在style中设置如下代码：

.login{
  background:url("~@/assets/image/beijing.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}