响应元素上的背景图像和径向渐变？

Question

这是正在使用的图片：

这是我使用 Vue.js、Bootstrap 和 CSS 实现的：

模板

<div class="landing">
  <div class="container text-white details h-100">
    <div class="row h-100">
      <div class="col-12 col-md-7 my-auto">
        <h1 class="text-left mb-0 font-weight-900 font-48">
          About the Alien Zoo experience
        </h1>
        <p class="text-left mb-0 font-16">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo
          dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum
        </p>
        <CustomButton
          class="d-block"
          buttonText="Next"
          @click.native="onButtonClick()"
          ></CustomButton>
      </div>
    </div>
  </div>
  <div class="row hero-image">
    <img class="background" src="../assets/images/Alien.png" alt="" />
  </div>
</div>

SCSS

.landing {
  position: relative;
  height: 100vh; // background-color: #151515;
  overflow-x: hidden;
  .hero-image {
    position: relative;
    left: 28%;
    width: 100%;
    size: cover;
  }
  .hero-image:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30vh;
    height: 100vh;
    background: linear-gradient( 93deg, rgba(21, 21, 21, 1) 10%, rgba(0, 0, 0, 0) 50%);
    /* W3C */
  }
  p {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .details {
    position: absolute;
    z-index: 2;
    padding-left: 12%;
  }
  .background {
    display: block;
    height: 100vh;
    width: 100vw;
  }
}
.mobile-alien {
  display: none;
}
@media only screen and (max-width: 768px) {
  .landing {
    display: none;
  }
  .mobile-alien {
    display: block;
  }
}
@media only screen and (min-width: 1900px) {
  .landing .details {
    right: 50%;
  }
}

我的解决方法是使背景图像成为普通图像标记，并在图像标记上使用:after 进行渐变。使用绝对和相对它也能保持响应，但我认为这不是正确的方法。

我使用的图像本身没有任何渐变。所以我使用 css 应用了线性渐变。但我想我必须在这里使用径向渐变，因为图像的角落也应该褪色为黑色（这种黑色 #151515）。我对渐变没有任何经验，无论我尝试使用径向还是无效。使用上面的 css，我已经能够达到一个不错的程度，但它看起来并不像它的最佳位置。

页面的背景颜色是#151515，如你所见，我必须使用渐变将其向左淡化。

任何帮助将不胜感激。谢谢。

Answer 1

使用 CSS background-image，您可以在降序 z-index 的单个元素上指定多个层。使用逗号分隔图层，一层用于渐变，一层用于图像：

.bg {
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0) 25%, rgba(24, 24, 24, 1) 75%),
    url(https://i.stack.imgur.com/piK6l.jpg);
}

在您的示例中，图像和径向渐变都被推到右侧，您可以使用另一个逗号分隔的 background-position 列表来做到这一点：

background-position: 200px, 200px;

这将留下一个您想要灰色的空白空间，因此为该空间指定background-color：

background-color: rgba(24, 24, 24, 1);

这是一个演示：

#app {
  width: 100%;
  height: 400px;
  color: white;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: rgba(24, 24, 24, 1);
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0) 25%, rgba(24, 24, 24, 1) 75%),
    url(https://i.stack.imgur.com/piK6l.jpg);
  background-position: 200px, 200px;
  background-repeat: no-repeat;
  background-size: cover;  
}

<div id="app">
  <div class="bg">My Content</div>
</div>