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

Question

有一个带有背景图像的横幅区域，上面有两个伪类背景覆盖。它似乎导致在叠加层上呈现一些奇怪的线条。它在 Retina 显示器上确实看起来更好，但需要更好的修复。

实时链接:http://dev.wonderjarcreative.com/sample-page/

html

<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>

CSS

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

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

Answer 1

你可以有多个背景渐变而没有伪装，我使用静态图像给容器一些高度和宽度，但你可以看到两个渐变同时工作。将 rgba 用于渐变中的颜色不透明度(就像您对黑色所做的那样)以进行进一步调整。

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

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

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

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

<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="https://placehold.it/1500x1500">
    </div>
  </div>
  <div class="featured-banner-content">
    <div class="wrap">
      <p>Here's some banner content</p>
    </div>
  </div>
</div>