css - 没有边框的不透明度渐变？

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，但没有成功。有没有办法摆脱它？ 提前致谢

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>