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

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;

这将留下您想要灰色的空白 space，因此请为此指定 background-color space:

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>

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

Background image and radial gradient on responsive element?

html

css

radial-gradients

vue.js

bootstrap-4