一,vue页面添加背景图片
<template>
<div class="login">
<h2 class="title">{{ msg }}</h2>
</div>
</template>
.login {
background: url("../img/login.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
二,页面留白问题
1,顶部留白情况
处理方式:
在APP.vue文件中的style中
#app{}样式中去掉margin-top: 60px;即可
效果图如图所示
发现页面顶部和左侧还是有小的留白
这是只需要在APP.vue文件中的style中添加
*{
padding: 0;
margin: 0;
}
即可