vue设置背景占满全屏

Posted w1990end

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue设置背景占满全屏相关的知识,希望对你有一定的参考价值。

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%;

以上是关于vue设置背景占满全屏的主要内容,如果未能解决你的问题,请参考以下文章

vue设置背景占满全屏

vue设置背景占满全屏

css 如何实现两个div占满全屏

vue中怎么把背景铺满全屏

关于 web 页面 占满全屏

background-size属性100% cover contain