【vue/css】如何给vue页面添加背景图片-vue cli3
2021-04-13 13:25
标签：文件 页面 dex data component width http 宽高 属性 找了很多教程终于做好了，现贴出来，以备不时之需。 1、首先需要两个div，一个用来放背景图，一个用来放除背景图之外的东西 第一个div放背景图 第二个div放登录页面，这里就不贴出来了。这样html部分就写完了，非常简单 2、js部分，这里也非常简单，但有一点，尝试使用css自带方式即src="http://www.soscw.com/图片路径"方式无法导入图片，可能是路径原因，改用值绑定方式 文件路径为： |——src |————assets |——————images |————————bg2.jpg |——components |————page |——————login.vue js为： 3、css部分。css有个属性叫z-index，是用来确定元素层叠关系的，值大的元素显示在值小的元素的上面。同时，该元素position必须为absolute才会起作用 4、大功告成，以下为效果图 【vue/css】如何给vue页面添加背景图片-vue cli3 标签：文件 页面 dex data component width http 宽高 属性 原文地址：https://www.cnblogs.com/qxxblogs/p/12388482.html1
2
data(){
return {
imgSrc:require(‘../../assets/images/bg2.jpg‘)
}
}
.background{
width:100%;
height:100%; /**宽高100%是为了图片铺满屏幕 */
z-index:-1;
position: absolute;
}
.front{
z-index:1;
position: absolute;
}
文章标题：【vue/css】如何给vue页面添加背景图片-vue cli3
文章链接：http://soscw.com/essay/75201.html