html - bootstrap 4 中的自定义卡片组

Question

如何在容器中创建这个卡片网格(Bootstrap 4)？我不明白如果文本在 div(卡片)中，我如何将文本放入容器中。

<section class="second__offers">
    <div class="container">
              <div class="card-group">
            <div class="card text-black">
                <img class="card-img-top" src="img/service-1.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <h4 class="card-subtitle">Card subtitle</h4>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <img class="card-img-top" src="img/service-2.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <img class="card-img-top" src="img/service-3.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
          </div>
    <div class="card-group">
        ...
     </div>
    </div>
  </section>

示例:

Answer 1

使用 background-image: 而不是 img 标签(为每张卡片添加类并在 css 中匹配 background-image:)

对于您的评论，让 container 取 100% 的 width 使用 container-fluid 而不是container 并在 css 中设置:

.container-fluid{
  padding:0!important;
  margin:0!important;
}

https://jsfiddle.net/nhybo32s/10/

.face{
     background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.body{
     background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.card {border:none!important}
.container-fluid{
  padding:0!important;
  margin:0!important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="second__offers">
    <div class="container-fluid">
              <div class="card-group">
            <div class="card text-black face">
                <div class="">
                    <h3 class="card-title">Card title</h3>
                    <h4 class="card-subtitle">Card subtitle</h4>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black body">
                <div>
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <div>
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
          </div>
    <div class="card-group">
        ...
     </div>
    </div>
  </section>