不带边界的不透明渐变？

Question

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

HTML：

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

CSS：

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

您可以在底部看到“边框”。我试图对div应用“ border：none”，但没有运气。有办法摆脱它吗？ 预先感谢

Answer 1

我更改了图片，没有底部边框显示..另外您还缺少一个结束标记

.audio-img {
position: absolute;
}
.audio-caption-background {
  background-color: black;
  width: 100%;
  height: 250px;
  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, grey);
}

<div style="position: relative;">
<div class="audio-caption-background"></div>
<img class="audio-img" height="600px" width="100%" src="https://seaduckjv.org/wp-content/themes/responsive-child/images/STEI-male-floating-TedSwem_4482-350.jpg" alt=""/>

</div>