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

问题描述

这是正在使用的图像：

这是我使用 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,1) 10%,rgba(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，正如你所看到的，我必须使用渐变将它淡化到左边。

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

解决方法

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

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

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

background-position: 200px,200px;

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

background-color: rgba(24,1);

这是一个演示：

#app {
  width: 100%;
  height: 400px;
  color: white;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: rgba(24,1);
  background-image:
    radial-gradient(circle,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>