css - 如何为通过 Razor 添加的每个图像添加文本叠加？

Question

我需要为通过我的 Razor 代码添加的每个图像添加一个数字叠加层。图像是通过 Razor 通过我的 SQL 数据库中的参数生成的。

理想情况下，数量应该随着每张图片的添加而增加，但我自己可以做到这一点。

这是代码...通过这种组合，我无法使用 Javascript。它只是使用从 db 表传递的图像源和样式向 viewBox 添加图像。

<div class="col-10 viewBox">

            @foreach (var x in Model.Structures)
            {
                    <img src="@x.ImageSource" style="@x.Style" />

            }

</div>

我开始认为我正在尝试做的事情是不可能的，或者根本不可能以我想要的方式进行。请将所有建议发送给我，谢谢。

Answer 1

您可以在标签内添加数字并将其 float 到右侧

   <div class="col-10 viewBox">
    <span class="label label-default pull-right">SOME NUMBER</label>
                @foreach (var x in Model.Structures)
                {
                        <img src="@x.ImageSource" style="@x.Style" />

                }

    </div>