html - 在叠加层上使文本变白

Question

在我的项目中，我有一个 div 作为背景图像。在其中，我有另一个 div 用作背景图像上的黑色叠加层。我想在我的页面上插入文本。我将此文本颜色设置为白色，但是在查看它时，叠加层使文本看起来是灰色而不是白色。

有谁知道如何使这个文本看起来完全是白色的？

这是我的代码：

.bgDiv {
  width: 100%;
  height: 88vh;
  position: relative;
  background: url("https://image.pposili/djdd.com") no-repeat center center/cover;
}

.overlay {
  position: absolute;
  background-color: black;
  height: 100%;
  width: 100%;
  opacity: 0.4;
}

<div class="bgDiv">
  <div class="overlay">
  </div>
  //THE TEXT <span style=" font-weight: 400; font-size: 25px; margin-left: 200px; color: #ffffff;">TEST </span>
</div>

标签： htmlcss

Answer 1

“覆盖”类在您的文本上方。因此，您的文本位于叠加层下方。你可以通过给你的文本一个更高的z-indexie来解决这个问题z-index: 1;