原始图片
蒙层渐变图片
实现
<div class="bg-box-in">
<div class="white-mask"></div>
<img class="bgimg" :src="currentData.bgimg" alt="" />
</div>
.bg-box-in {
width: 100%;
height: 100%;
position: relative;
.white-mask {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 1;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.bgimg {
width: 100%;
height: 100%;
}
}