如何给vue页面添加背景图片3、css部分：css有个属性叫z-index，是用来确定元素层叠关系的，值大的元素显示在值

在做项目的时候想给vue页面添加一个背景，可是在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式：background:url("../../assets/login.jpg")，因此必须换一种方法，以下是百度得来并实践可行的两种方法

第一种

1、在data中定义如下：

export default {
name：'login',
data () {
    return () {
        login: {
            backgroundImage:"url(" + require("../../assests/login.jpg") + ")"
        }
    }
}}

2、通过行内样式将样式引入

<div class="login" :style ="login"></div>

见链接：www.jb51.net/article/135…

第二种

1、首先需要两个div，一个用来放背景图，一个用来放除背景图之外的东西

<div class="background"></div>  //放背景图
<div class="content"></div>  //放登陆页面

其中第一个div如下

<div class="background">    
<img :src="imgSrc" width="100%" height="100%" alt="" /></div>

2、js部分

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

3、css部分：css有个属性叫z-index，是用来确定元素层叠关系的，值大的元素显示在值小的元素的上面。同时，该元素position必须为absolute才会起作用

.background {
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 **/
    z-index:-1;
    position: absolute;
}
 .content {
    z-index:1;
    position: absolute;
}

见链接：www.cnblogs.com/qxxblogs/p/…