如何在 div / 图像上添加透明到黑色的渐变？

Question

我有一些包含图像和文本的 flex 框。

.bItem {
    display: flex;
    display: block;
    justify-content: flex-end;   
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 9px;
    bottom: 0;
    left: 9px;
    padding: 18px;  
    background-size: cover;
    background-position: center center;
}

HTML：

<div class="box">
 <a class="bItem" href="/about/" style="background-image:url(/images/one.jpg);" >
  <div class="bText white">
    <h3>TITLE</h3>
    Additional text here.</div>
  </a>
 </div>

我假设这样的事情，附加到.bItem会工作：

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);

有没有办法可以将它附加到.bItem，最好不必添加另一个类？

我遇到的问题是文本难以阅读，带有白色文本，底部的黑色渐变将有助于使其更清晰。

Answer 1

您不能在同一个元素上同时使用渐变和背景图像，因为两者都是background-image. 但是您可以将渐变分配给 的伪元素.bItem，因此您不必为它包含额外的元素。此外，您可以只使用transparentandblack而不是rgba()

.bItem {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 9px;
  bottom: 0;
  left: 9px;
  padding: 18px;
  background-size: cover;
  background-position: center center;
  background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);
}

.bItem:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
}

<div class="box">
  <a class="bItem" href="/about/">
    <div class="bText white">
      <h3>TITLE</h3> Additional text here.</div>
  </a>
</div>