In Html how do I display a Bootstrap Badge onto an image itself

问题

I have a grid of images, and for each image I have two figcaption elements rendered as badges beneth each image (plus a 3rd that renders correctly as a hyperlink), what I really want to do is have the badges at the bottom of the image itself, but have no idea how to do this.

<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>

e.g

Based on Olegs answer I now have

回答1:

You can use CSS to make them on top of the image

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

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

Here's an attached JSFiddle

来源：https://stackoverflow.com/questions/57042978/in-html-how-do-i-display-a-bootstrap-badge-onto-an-image-itself