问题描述
我无法弄清楚如何使用带有覆盖物的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;
}
知道我在做什么错吗?
解决方法
发生这种情况是由于.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