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

希望下面的代码有帮助。我将图像大小设置为 60 像素 x 60 像素，并相应地设置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>