Vue dynamically sets the background image and sets the gradient color of the background image

1. VUE dynamically sets the background image

<template v-for="(item,index) in menu">
	<div :key="item.id"
	:style="{backgroundImage:'url('+itemImg(item)+')'}">
	</div>
</template>

2. How to import static images

<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>

3. Set the background image gradient

: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 表示从右向左

4. How to set the background image in the lower right corner

<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;
}

Use absolute positioning and relative positioning to solve the problem

The parent div uses position:relative to solve, and the child div uses the position:absolute attribute;