【vue/css】如何给vue页面添加背景图片-vue cli3

转自于：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{     100%;       height:100%;  /**宽高100%是为了图片铺满屏幕 */     z-index:-1;     position: absolute; }   .front{     z-index:1;     position: absolute; }

4、大功告成，以下为效果图