转自于：https://www.cnblogs.com/qxxblogs/p/12388482.html
找了很多教程终于做好了，现贴出来，以备不时之需。
1、首先需要两个div，一个用来放背景图，一个用来放除背景图之外的东西
1 <div class="background"></div> 2 <div class="front"></div>
第一个div放背景图
|
1
2
3
|
<
div
class="background">
<
img
:src="imgSrc" width="100%" height="100%" alt="" />
</
div
>
|
第二个div放登录页面，这里就不贴出来了。这样html部分就写完了，非常简单
2、js部分，这里也非常简单，但有一点，尝试使用css自带方式即src="图片路径"方式无法导入图片，可能是路径原因，改用值绑定方式
文件路径为：
|——src
|————assets
|——————images
|————————bg2.jpg
|——components
|————page
|——————login.vue
js为：
|
1
2
3
4
5
|
data(){
return
{
imgSrc:require(
'../../assets/images/bg2.jpg'
)
}
}
|
3、css部分。css有个属性叫z-index，是用来确定元素层叠关系的，值大的元素显示在值小的元素的上面。同时，该元素position必须为absolute才会起作用
|
1
2
3
4
5
6
7
8
9
10
11
|
.background{
width:100%;
height:100%;
/**宽高100%是为了图片铺满屏幕 */
z-index:-1;
position: absolute;
}
.front{
z-index:1;
position: absolute;
}
|
4、大功告成，以下为效果图
