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，最好不需要添加其他类？

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

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>

Answer 2

锚标记是内联的。您只能将背景应用于块。因此，您可以将显示类型更改为“阻止”。这可能会导致其他问题，但从那里开始。

Answer 3

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

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

Answer 4

不要将渐变应用于锚标记。创建另一个类以将线性渐变应用于背景容器，其中包含一行：

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url(/images/one.jpg);

这将允许渐变仅应用于背景图像，同时允许文本保持不受影响。然后，您可以单独设置文本和锚标签的样式。

Answer 5

<块引用>

如果您想在图像上线性渐变，您可以将背景颜色添加到 div 类并降低图像不透明度。

<div class="col">         \\set background color for col class in
     <img src="" alt="">  \\now set opacity for img in css
</div>

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

5 个答案: