如何为卡片的图像叠加层添加半透明背景

Question

我无法弄清楚如何使用带有覆盖物的Bootstrap卡来创建这样的效果：

请注意文本的不透明背景-我的叠加图似乎总是覆盖了整个卡片的图像。

<div class="row cols-flex">
  <div class="col">

    <div class="card bg-dark text-white">
      <img src="assets/images/bp/road.png" class="card-img" alt="...">
      <div class="card-img-overlay d-flex flex-column align-items-start overlay">

        <p class="card-text mt-auto">Check out cool stuff</p>

      </div>
    </div>

  </div>
</div>

CSS：

.overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: black;
}

知道我在做什么错吗？

Answer 1

发生这种情况是由于.card-img-overlay内置样式

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
    border-radius: calc(.25rem - 1px);
}

在此处，将top和bottom设置为零将导致div调整为父容器的宽度和高度。您可以通过将top: inherit;设置为.overlay来解决此问题。

除此之外，opacity: 0导致完全透明的块。请改用opacity: 0.5。

我对您的代码进行了一些更改，这是结果 https://codepen.io/itdaos/pen/OJNQLxR