【vue/css】如何給vue頁面添加背景圖片-vue cli3

找了很多教程終於做好了，現貼出來，以備不時之需。

 

1、首先需要兩個div，一個用來放背景圖，一個用來放除背景圖之外的東西

<div class="background"></div> 2 <div class="front"></div>

第一個div放背景圖

<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為：　

data(){
    return {
        imgSrc:require('../../assets/images/bg2.jpg')
    }
}

 

3、css部分。css有個屬性叫z-index，是用來確定元素層疊關系的，值大的元素顯示在值小的元素的上面。同時，該元素position必須為absolute才會起作用

.background{
    width:100%;   
    height:100%;  /**寬高100%是為了圖片鋪滿屏幕 */
    z-index:-1; position: absolute;
}

.front{
    z-index:1; position: absolute;
}

 

4、大功告成，以下為效果圖