时间戳

首页 > 解决方案 > Bootstrap 4中带有图像和背景作为标题的卡片

html - Bootstrap 4中带有图像和背景作为标题的卡片

问题描述

使用一些 Bootstrap 卡片，我希望在标题中创建一些带有彩色背景和圆形图像的卡片，如下所示：

在此处输入图像描述

但是，当我使用一些示例代码时：

<!-- Background color -->
<div class="card-up aqua-gradient"></div>

<!-- Avatar -->
<div class="avatar mx-auto white">
  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive" alt="woman avatar">
</div>

<!-- Content -->
<div class="card-body">
  <!-- Name -->
  <h4 class="card-title font-weight-bold">Martha Smith</h4>
  <hr>
  <!-- Quotation -->
  <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
    adipisci</p>
</div>

结果缺少一些组件：

在此处输入图像描述

在 Bootstrap 4 中可以设置此卡吗？如果是这样，我在这里错过了什么？在此先感谢您的帮助。

标签： htmlcssbootstrap-4

解决方案

我为你准备了一个非常简单的例子。我希望这会有所帮助。

.aqua-gradient {
  height: 300px;
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(233, 242, 233, 0.9878326330532213) 0%, rgba(0, 212, 255, 1) 51%, rgba(114, 156, 7, 1) 93%);
}

.image {
  margin-top: -150px;
}

.avatar-container {
  width: 90%;
  border: 1px solid #eee;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="avatar-container text-center mx-auto">
  <div class="card-up aqua-gradient"></div>
  <!-- Avatar -->
  <div class="avatar mx-auto white">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive bg-white p-3 image" alt="woman avatar">
  </div>
  <!-- Content -->
  <div class="card-body">
    <!-- Name -->
    <h4 class="card-title font-weight-bold">Martha Smith</h4>
    <hr>
    <!-- Quotation -->
    <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
    </p>
  </div>
</div>

推荐阅读