伪元素css背景覆盖-导致奇怪的线条渲染

有一个带有背景图像的横幅区域，上面覆盖着两个伪类背景。这似乎会在覆盖层上造成一些奇怪的线条渲染。它在视网膜监视器上看起来确实更好，但需要更好的修复

实时链接：

html

---

任何消除渲染线的想法都将不胜感激

你可以有多个没有伪的背景渐变，我使用了一个静态图像给容器一些高度和宽度，但是你可以看到两个渐变同时工作。使用rgba对渐变中的颜色不透明度进行进一步调整（与黑色一样）

。特色横幅{
位置：相对位置；
身高：100%；
显示器：flex；
}
.特色横幅背景包装，
.特色横幅背景图像{
身高：100%；
}
.特色横幅{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景：线性梯度（到底部，#383838，rgba（56,56,56,0.6）），线性梯度（右下角，3579f5，3579f5，#760484）；
}
.特色横幅背景图像img{
显示：块；
保证金：0自动；
不透明度：0；
可见性：隐藏；
}
.特色横幅内容{
位置：绝对位置；
z指数：2；
排名：0；
左：0；
身高：100%；
宽度：100%；
填充：2rem0；
颜色：#fff；
}
.特色横幅内容>.wrap{
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

这里有一些横幅内容

您可以在css中声明多个背景，而无需伪字符，您是否尝试过此方法？

<div id="featured-banner" class="featured-banner">
  <div class="featured-banner-background-wrap">
    <div class="featured-banner-background-image" style="background( the url ) center top / cover">
      <img src="the url">
    </div>
  </div>
  <div class="featured-banner-content">
    <div class="wrap">
      <!-- content -->
    </div>
  </div>
</div>

.featured-banner {
    position: relative;
    height: 100%;
    flex: 1;
}

.featured-banner-background-wrap,
.featured-banner-background-image {
    height: 100%;
}

.featured-banner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, #383838, rgba(56,56,56,0.6));
}

.featured-banner-background-image:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom right, #3579f5, #760484);
    opacity: 0.8;
}

.featured-banner-background-image img {
    display: block;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
}

.featured-banner-content {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 2rem 0;
    color: #fff;
}

.featured-banner-content > .wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}