码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-03-01 10:48:34      阅读:479      评论:0      收藏:0      [点我收藏+]

标签:文件   页面   dex   data   component   width   http   宽高   属性   

找了很多教程终于做好了,现贴出来,以备不时之需。

 

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

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

第一个div放背景图

<div class="background">
    <img :src="imgSrc" width="100%" height="100%"  />
</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、大功告成,以下为效果图

技术图片

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

标签:文件   页面   dex   data   component   width   http   宽高   属性   

原文地址:https://www.cnblogs.com/qxxblogs/p/12388482.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!