css - 如何为通过剃刀添加的每个图像添加文本覆盖？

Question

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

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

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

<div class="col-10 viewBox">

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

            }

</div>

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

标签： cssimagerazor

Answer 1

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

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