可以引导 4 卡平铺背景图像吗

Question

我正在尝试让卡片具有平铺背景图像。要获得单个图像背景，我使用：

<div class="card img-fluid">
  <img class="card-img-top" src="images/backcard-brushedmetal.jpg">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" /></a>
        xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>

我的问题是我使用不同尺寸的卡片，而现在我的图像大小决定了卡片的大小；我想我想反过来（控制显示背景大小的卡片）。所以我想知道是否可以平铺背景图像，使其仅填充背景，然后卡片或图像的大小无关紧要。

据我所知，这甚至可能是不可能的，如果没有，那很好，我会寻找另一种方法来做类似的事情:)

不管怎样，谢谢你的建议:)

詹姆斯

Answer 1

如果使用 img 元素的唯一目的是作为背景 - 使用 background-image CSS property 在元素上设置背景图像。

按 cmets 编辑： 显然float 部分在给定的标记上引起了一些“问题”，但是还有更多的东西......无法弄清楚为什么这不起作用 - 所以我删除了 BS4（添加了 2 个示例）：

.card.img-fluid {
  background: url(http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}

<div class="card img-fluid">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" /></a>
        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>
<hr>
<div class="card img-fluid">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" /></a>
        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br>        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br>        xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br>        xxxSomeTextHerexxx<br>
      </p>
    </div>
  </div>
</div>

这个问题需要一些“bootstrap 4 专家”来回答 - 显然这不是我（：

---

旧（不工作）答案：

在您的情况下，由于您希望图像覆盖元素，您可以这样做：

<style>
.card.img-fluid {
  background: url(images/backcard-brushedmetal.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
<div class="card img-fluid">
  <div class="card-img-overlay">
    <div class="card-body text-justify">
      <h3 class="articleh3"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" /></a>
        xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>