在HTML中，如何在图像本身上显示Bootstrap徽章 [英] In Html how do I display a Bootstrap Badge onto an image itself

问题描述

我有一个图像网格，对于每个图像，我在每个图像上都有两个figcaption元素呈现为徽章(加上第三个可正确呈现为超链接的徽章)，我真正想做的是在底部放置徽章图片本身，但不知道该怎么做.

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>

例如

基于我现在拥有的Olegs答案

Based on Olegs answer I now have

推荐答案

您可以使用CSS将其放置在图片顶部

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

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

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

以下为附件 JSFiddle

这篇关于在HTML中，如何在图像本身上显示Bootstrap徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！