轉自於：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、大功告成，以下為效果圖
