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

Question

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

.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 的伪元素，这样您就不必为它包含额外的元素。此外，您可以只使用 transparent 和 black 而不是 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>