覆盖图像亮度调节载于文本

Question

我有以下代码，我想降低图像的亮度，以便我可以为文本白色上色。

但是，亮度过滤器将传递到文本上。我已经尝试调整Z索引，但它不起作用。有人可以为我提供解决方案吗？

.jumbotron {
    background-size: cover;
    background-position: center;
    width: 100%;
    filter: brightness(80%);
    z-index: -1;
}
.z-index {
color: white;
}

<div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);">
  <div class="text-center py-5 px-4 z-index">
    <div>
      <h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
      <p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!
      </p>
    </div>
  </div>
</div>

Answer 1

您的HTML标签的结构使得很难实现您的目标。我会

1. 创建一个div给它一个 container的类position: relative。
2. 从图像div jumbotron中取出文本div z-index，并将两个divs放在 containerdiv中。
3. 通过将此值授予图像div，width: 100%; height: 120px;
来设置图像的大小
4. 然后将包含Div position: absolute的文本浮动它，并给它top: 0; left: 0;以手动将文本放在图像div的顶部。

以这种方式，当图像div被设计时，文本div不会受到影响。

.container {
  position: relative;
}
.jumbotron {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 120px;
  filter: brightness(60%);
}
.z-index {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);"></div>
  <div class="text-center py-5 px-4 z-index">
    <h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
    <p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!</p>
  </div>
</div>