vue 动态设置背景图片，并设置背景图片的渐变色

一、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属性；