CSS：如何获得这种效果？ （照片在卡片顶部，走出它）

Question

我对CSS很新，所以如果有人之前要求这个效果，我很抱歉，我不知道它的名字。

我需要创建这个（图片1），我目前有这个（图片2）：我不知道创建这个效果的热点或它的名称是什么。我尝试过使用z-index和padding，但我不认为这是最好的解决方案。

这是代码（对于图片2）：

<div class="row text-center">
    <div class="col-lg-4">
        <div class="card" style="width: 20rem;">
            <img class="card-img-top" src="picture.png" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Mirion Jones</h4>
                <p class="card-position">CEO Founder</p>
                <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>
    </div>
</div>

我正在使用Bootstrap 4。

Answer 1

希望下面的代码有所帮助。我将图像大小设置为60px×60px，并相应地设置margin和top，您应该使用所需的尺寸更改它们。

.card-img-top {
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -30px;
  width: 60px !important;
  height: 60px;
}

.card {
  margin-top: 30px;
  padding-top: 30px;
}

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


<div class="row text-center">
  <div class="col-lg-4">
    <div class="card" style="width: 20rem;">
      <img class="card-img-top img-circle rounded-circle" src="https://dummyimage.com/100x100/000/fff" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Mirion Jones</h4>
        <p class="card-position">CEO Founder</p>
        <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>
  </div>
</div>