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

Question

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

 .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 ，最好不必添加另一个类？

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

原文由 davvv 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Michael Coker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不知道这是否是您正在寻找的，但这里是您如何在文本上制作渐变。

  h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

原文由 Pieter de Vries 发布，翻译遵循 CC BY-SA 3.0 许可协议