html - 在 Html 中，如何在图像本身上显示 Bootstrap Badge

Question

我有一个图像网格，对于每个图像，我有两个 figcaption 元素呈现为每个图像下方的徽章(加上第三个正确呈现为超链接)，我真正想做的是将徽章放在底部图像本身，但不知道如何做到这一点。

<div style="display:grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00041.html">
                <img src="../images/Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                12 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00041.html">
                    Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders
                </a>
            </figcaption>
        </figure>
    </div>
    <div>
        <figure class="figure">
            <a href="FixSongsReport00277_changes00029.html">
                <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="badge badge-secondary">
                27 files 
            </figcaption>
            <figcaption class="badge badge-secondary">
                0 files modified
            </figcaption>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00277_changes00029.html">
                    Choir of Trinity College
                </a>
            </figcaption>
        </figure>
    </div>

例如

基于 Olegs 的回答我现在有了

Answer 1

您可以使用 CSS 使它们位于图像之上

.badge{
   position: relative;
   top: -3em;        
}

.figure-caption {
  position: relative;
  top: -2em
}

这是附件 JSFiddle