设置图像的线性渐变

问：

有人可以帮我解决这个问题吗？我正在尝试操纵 .box 淡入淡出以使那里的每个图像都是线性渐变的，但是当我修改 css 时，我只能获得不透明度较低的纯色或彩色。有人可以帮我解决这个问题吗？这是在 vue.js 中，我已经遵循了一些相同的问题和这里的答案，但我得到的只是实心或较低的不透明度。

<template>
<div class="Customcard">
<el-image
:lazy="true"
class="Custom-poster"
:src="imagesLink + info.CustomTableImage"
/>
<img v-if="corner" :src="require(`@/assets/Custom/${corner}.png`)" class="Custom-corner">
<!-- <h1>{{ corner }}</h1> -->
<div class="Customcard-main">
<div class="Customcard-main-tit">
<img :src="imagesLink + info.CustomIconImage" class="Customcard-icon" />
<span>{{ $t(getKey(info.CustomName)) }}</span>
</div>
<div class="Customcard-short" v-for="(url, index) in imageLinks" :key="index">
<div class="background-image-div">
<img class="box-fading" :src="url"/>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "Card",
props: {
info: {
type: Object,
default: () => {},
},
},
data(){
return {
corner: '',
imageLinks: []
}
},
created(){
console.log('info', this.info.value, this.imagesLink)
const cornerEmum = {'a':'new','b':'new','c':'hot'}
this.corner = cornerEmum[this.info.labelName]
},
mounted() {
const images = this.$el.getElementsByTagName('img');
this.imageLinks = Array.from(images).map(img => img.src);
console.log(this.imageLinks);
},
setup() {
function swSkip(CustomId,lang) {
window.open(`/CustomLoading?CustomId=${CustomId}&lang=${lang}`);
}
return {
swSkip,
imagesLink: window.imagesLink,
goDetails({ id }) {
window.open(`/GameDetails/${id}/Custom`);
},
};
},
};
</script>

<style lang="scss" scoped>
.Customcard {
display: inline-block;
height: 450px;
width: 350px;
border-radius: 20px;
margin-bottom: 50px;
margin-right: 50px;
overflow: hidden;
position: relative;
transition: all 0.3s;
opacity: 0;
cursor: pointer;
animation: move_opacity 0.5s ease 1 forwards;
&:nth-child(3n) {
margin-right: 0;
}
&:hover {
transform: translateY(-10px);
box-shadow: 0 5px 10px #ddd;
}
.Custom-poster {
width: 100%;
height: 450px;
}
.Custom-corner{
position: absolute;
left: 0;
top: 0;
width: 81px;
}
.Customcard-main {
height: 302px;
flex-shrink: 0;
background: rgba(93, 37, 8, 0.09);
backdrop-filter: blur(5px);
box-sizing: border-box;
width: 100%;
transform: translateY(-255px); 
//overflow: hidden;
//cursor: pointer;
transition: all 0s;
opacity: 0;
animation: move_opacity 0.5s ease 1 forwards;
margin: 0 auto;
.Customcard-short{
width: 100%;
height: 254px;
//background: linear-gradient(180deg, rgba(93, 37, 8, 0.08) 0%, #5D2508 27.56%);
backdrop-filter: blur(2px);
transform: translateY(-12px); 
margin: 0 auto;
overflow: hidden;
}

.background-image-div {
position: relative;
height: 254px;
width: 100%;
transform: scale(50);
position: center;
filter: saturate(200%) brightness(80%) blur(50px);

.box-fading{
-webkit-mask-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
mask-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
mask-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
}
.background-image {
width: 302px;
height: 254px;
top: 0;
left: 0;
right: 0;
bottom: 0;
//filter: blur(50px);
}
.Custom-cont{
padding: 0 20px;
transform: translateY(-240px);
}
&:hover {
transform: translateY(-307px);
}


.Customcard-main-tit {
display: flex;
align-items: center;
transform: translateY(-7px); 
color: #fff;
padding: 0 20px;

.Customcard-icon {
transform: translateY(-16px);
display: flex;
width: 60px;
height: 60px;
margin-right: 12px;
}
span {
font-size: 18px;
line-height: 25.2px;
font-weight: 500;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
}
.Customcard-main-cont {
margin-top: 5px;
width: 100%;
font-weight: 400;
font-size: 14px;
color: #fff;
transform: translateY(-2px);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
} 
}
@keyframes move_opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
</style>