vue给html加背景图,Vue背景图如何全屏显示

在index.html中加入

image.png

body {

margin: 0;

padding: 0;

}

html,

body,

#app {

height: 100%;

}

没加之前：

image.png

加入了之后：

image.png

页面代码：

系统登录

size="normal"

type="text"

v-model="loginForm.username"

auto-complete="off"

placeholder="请输入用户名"

>

size="normal"

type="password"

v-model="loginForm.password"

auto-complete="off"

placeholder="请输入密码"

>

size="normal"

type="primary"

style="width: 100%;"

@click="submitLogin"

>登录

>

export default {

name: 'Login',

data() {

return {

loading: false,

loginForm: {

username: 'gj',

password: '123',

},

checked: true,

rules: {

username: [

{ required: true, message: '请输入用户名', trigger: 'blur' },

],

password: [{ required: true, message: '请输入密码', trigger: 'blur' }],

},

}

},

methods: {

submitLogin() {

let path = this.$route.query.redirect

this.$router.replace(path == '/' || path == undefined ? '/home' : path)

},

},

}

.loginStyle {

display: flex;

justify-content: center;

align-items: center;

background-image: url('../assets/5.jpg');

background-size: 100% 100%;

height: 100%;

background-size: cover;

}

.loginContainer {

border-radius: 15px;

background-clip: padding-box;

margin: 180px auto;

width: 350px;

padding: 15px 35px 15px 35px;

background: #fff;

border: 1px solid #eaeaea;

box-shadow: 0 0 25px #cac6c6;

}

.loginTitle {

margin: 15px auto 20px auto;

text-align: center;

color: #505458;

}

.loginRemember {

text-align: left;

margin: 0px 0px 15px 0px;

}