Question

我尝试将标题放在图像上，我希望我的图片标题不是我的图片吗？

这是我的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>

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

Answer 1

Bootstrap 4没有任何本机工具可以在card组件中实现这一点，但是只需要一些额外的CSS就可以使它工作：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我们将.card-img-top图片封装在名为.card-img-caption的新包装内，然后应用一些定位和z-index，以便图片始终位于文本下方。

您可能希望摆弄margin上的.card-img-caption .card-text，因为此处使用的33%更多的是一个神奇的数字，而不是更优雅的东西。

如果你知道你用作背景的图像的尺寸;一个更聪明的举动可能就是这样做...使用background-image。

Answer 2

试试这样：

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>

Answer 3

我知道这很旧，但是对于使用Bootstrap 4的用户，有一种使用card-img-overlay类的本地方法。

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/card/#image-overlays

Answer 4

可以在课程

中添加课程'carousel-caption'

<div class="card card-blog">
    <div class="card">
        <a href="#pablo">
            <img class="img" src="http://placehold.it/1000x550">
        </a>
    </div>
    <div class="card-body text-center carousel-caption">
        <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>

Answer 5

您必须使用flex类，试试看！

<div class="card">
    <div class="d-flex flex-wrap align-items-center justify-content-center">
        <a href="#pablo">
            <img class="card-img-top" src="assets/img/backgound.jpg">
        </a>
        <h4 class="card-title">TEXT OVER IMAGE</h4>
    </div>

    <div class="card-body text-center">
        <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>

Answer 6

这是我使用引导程序img-wrapper和img-overlay类的解决方案。

<div class="card">
    <div class="img-wrapper">
        <img class="card-img-top" src="images/mytopimage.png"/>
        <div class="img-overlay"> <h2>Text Over Image</h2> </div>
    </div>
    <div class="card-body">
        <h2 class="card-title">My Card</h2>
        <p class="card-text">My Card Text</p>
    </div>
</div>

如何将文本放在图像卡头引导程序4上

6 个答案: