Css 没有边界的不透明度梯度？

我在css中为div创建了一个不透明度渐变，但div的边框仍然可见（黑色水平线，看起来像底部的边框）

HTML:

您可以在底部看到“边框”。我试着对div应用“border:none”，但没有成功。有办法摆脱它吗？

---

提前感谢

我更改了图像，没有显示底部边框。。你还少了一个结束标记

.audioimg{
位置：绝对位置；
}
.音频字幕背景{
背景色：黑色；
宽度：100%；
高度：250px；
位置：绝对位置；
排名：0；
z指数：50；
混合模式：硬光；
}
.音频字幕背景：在{
位置：绝对位置；
内容：“；
左：0px；
顶部：0px；
身高：100%；
宽度：100%；
背景：线性渐变（向右，透明，灰色）；
}

请添加您的全部代码。您的代码未满。如果添加您的所有代码，我可以帮助您。但现在这还不够。听着，你是对的，问题不在于我共享的代码，而是在另一个类中，我应该更新或发布一个新问题，因为它看起来像一个bug。谢谢你的帮助

<div className="audio-caption-background">/div>
<img className="audio-img" src="audio.jpg alt=""/>

.audio-img {
position: absolute;
}
.audio-caption-background {
  background-color: black;
  width: 100%;
  height: 50px;
  position: absolute;
  top:0;
  z-index: 50;
  mix-blend-mode: hard-light;
}

.audio-caption-background:after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, transparent, gray);
}