一、VUE动态设置背景图片
<template v-for="(item,index) in menu">
<div :key="item.id"
:style="{backgroundImage:'url('+itemImg(item)+')'}">
</div>
</template>
二、静态图片引入方式
<div class="indexWrap" :style="{backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0)),url(' + require('@/assets/images/zcpd.png') + ')'}">
</div>
<style>
.indexWrap {
background-size: 100% 100%;
float: right;
height: 80%;
width: 40%;
position:absolute;
bottom:0;
right:0;
z-index: 0;
overflow:visible;
}
</style>
三、设置背景图片渐变
:style="{backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0)),url(' + item.matImg + ')'}"
rgba(255,255,255,0.9)含义
前三个数字表示颜色,第四个数字表示透明度
to right 表示从右向左
四、如何将背景图片设置在右下角
<div style="position:relative;">
<div class="indexWrap" :style="{backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0)),url(' + item.matImg + ')'}">
</div>
</div>
.indexWrap {
background-size: 100% 100%;
float: right;
height: 80%;
width: 40%;
position:absolute;
bottom:0;
right:0;
z-index: 0;
overflow:visible;
}
采用绝对定位和相对定位解决问题
父div使用position:relative解决,子div使用position:absolute属性;