如何将文本放在图像卡头 bootstrap 4 上

Question

我尝试将标题放在图像上，我希望我的卡片标题在我的图像上不确定我是否需要 CSS？

这是我的 HTML

 <div class="card card-blog">
        <div class="card">
            <a href="#pablo">
                <img class="img" src="assets/img/backgound.jpg">
            </a>
        </div>
        <div class="card-body text-center">
            <h4 class="card-title">
                TEXT OVER IMAGE
            </h4>
            <div class="card-description">
                <div class="table-responsive">

                </div>
            </div>
            <div class="card-footer">
                <a href="#pablo" class="btn btn-danger btn-round">View Article</a>
            </div>
        </div>
    </div>
</div>

输出：我可以将卡片标题移到图像上吗？

原文由 test1321 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 4 没有附带任何本机工具来在 card 组件中实现这一点，但是通过一些额外的 CSS，您可以使其工作：

 .card-img-caption {
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
}

.card-img-caption .card-img-top {
  z-index: 0;
}

.card-img-caption .card-text {
  text-align: center;
  width: 100%;
  margin: 33% 0;
  position: absolute;
  z-index: 1;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="card" style="width: 20rem;">
  <div class="card-img-caption">
    <p class="card-text">Test</p>
    <img class="card-img-top" src="http://placehold.it/130x100" alt="Card image cap">
  </div>

  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

我们将 .card-img-top 图像封装在一个名为 .card-img-caption 的新包装器中，然后应用一些定位和 z-index 始终位于图像下方。

您可能想要摆弄 margin 在 .card-img-caption .card-text 因为 33% 比这里使用的数字更优雅。

不过，如果您知道用作背景的图像的尺寸；一个更聪明的举动可能就是这样做……使用 background-image 。

原文由 Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议