Javascript img标签css上方的线性梯度

我有一张卡片，图片是从BE那里取的。该图像是卡的背景图像。文本位于此图像上方。我需要在图像上方和文本下方添加渐变。此外，当用户将鼠标悬停在卡上时，渐变颜色也应该改变。如何使图像填充整个卡片并在图像上显示线性渐变

.card{
位置：相对位置；
左边距：25px；
最小宽度：245px；
身高：293px；
边界半径：20px；
盒影：0px 4px 12px 1px var（--盒影颜色）；
右边距：1rem；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
对齐项目：居中；
证明内容：中心；
z指数：2；
过渡计时功能：立方贝塞尔（0.64,0.57,0.67,1.53）；
变换：比例（1）；
过渡时间：300ms；
}

标题

//在此处输入代码

.card{
位置：相对位置；
左边距：25px；
最小宽度：245px；
身高：293px；
边界半径：20px；
盒影：0px 4px 12px 1px var（--盒影颜色）；
右边距：1rem；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
对齐项目：居中；
证明内容：中心；
z指数：2；
过渡计时功能：立方贝塞尔（0.64,0.57,0.67,1.53）；
变换：比例（1）；
过渡时间：300ms；
显示：内联块；
}
1.坡度{
显示：内联块；
背景：-moz线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.65）100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，rgba（0,0,0,0.65））、颜色停止（100%，rgba（0,0,0,0））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.65）100%）；/*Chrome10+，Safari5.1+*/
背景：-o-线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.65）100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（0,0,0,0）0%，rgba（0,0,0,0.65）100%）；/*IE10+*/
背景：线性梯度（至底部，rgba（0,0,0,0）0%，rgba（0,0,0,0.65）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#a6000000'，endColorstr='#00000000'，GradientType=0）；/*IE6-9*/
}
img{
位置：相对位置；
z指数：-1；
显示：块；
高度：200px；宽度：自动；
}

标题dfdf

这里有一个解决方案，试试这个

正文{
字体系列：“Segoe UI”、“旧金山”、Calibri、Helvetica、Arial、无衬线字体；
保证金：0；
填充：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
c-颗粒剂{
背景：#000；
背景：-moz线性梯度（-45度，#0000000%，#00000025%，#1e539e 50%，#ff3083 75%，#7800a8 100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（-45度，#0000000%，#00000025%，#1e539e 50%，#ff3083 75%，#7800a8 100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（135度、0000000%、00000025%、1e539e 50%、ff3083 75%、7800a8 100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
背景大小：400%400%；
背景重复：无重复；
显示器：flex；
宽度：500px；
高度：500px；
最大宽度：100vw；
最大高度：100vh；
证明内容：中心；
对齐项目：居中；
颜色：#fff；
位置：相对位置；
光标：指针；
过渡期：所有；
}
.c-颗粒物{
位置：绝对位置；
左：0；
排名：0；
背景：#000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb)无重复中心；
背景尺寸：封面；
宽度：100%；
身高：100%；
z指数：1；
不透明度：.5；
混合模式：屏幕；
}
.c-颗粒物标题{
位置：相对位置；
z指数：10；
文本转换：大写；
字母间距：.05em；
}
.c-颗粒剂：悬停{
背景位置：100%100%；
}
.c-graidient：悬停标题{
文本阴影：0 20px黑色；
}

梯度悬停效应

试试这个

正文{
字体系列：“Segoe UI”、“旧金山”、Calibri、Helvetica、Arial、无衬线字体；
保证金：0；
填充：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
c-颗粒剂{
背景：#000；
背景：-moz线性梯度（-45度，#0000000%，#00000025%，#1e539e 50%，#ff3083 75%，#7800a8 100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（-45度，#0000000%，#00000025%，#1e539e 50%，#ff3083 75%，#7800a8 100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（135度、0000000%、00000025%、1e539e 50%、ff3083 75%、7800a8 100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
背景大小：400%400%；
背景重复：无重复；
显示器：flex；
宽度：500px；
高度：500px；
最大宽度：100vw；
最大高度：自动；
证明内容：中心；
对齐项目：居中；
颜色：#fff；
位置：相对位置；
光标：指针；
过渡期：所有；
}
.c-颗粒物{
位置：绝对位置；
左：0；
排名：0；
背景位置：中心；
背景重复：无重复；
背景：#000；
背景尺寸：封面；
宽度：100%；
高度：自动；
z指数：1；
不透明度：.5；
混合模式：屏幕；
}
.c-颗粒物标题{
位置：相对位置；
z指数：10；
文本转换：大写；
字母间距：.05em；
}
.c-颗粒剂：悬停{
背景位置：100%100%；
}
.c-graidient：悬停标题{
文本阴影：0 20px黑色；
}

梯度悬停效应

图像从API中获取。我不能把它们放在css中