html - 如何将文本放在来自数据库的图片上？

Question

我正在使用 bootstrap，我的图片在我的行和列中，但我找不到在这张图片上放置文本的方法。有什么方法可以实现这一点吗？

<div class="container-fluid">
@foreach (Item items in Model.Items)
{
    <div class="row">
        <div class="col-md-12 text-center">
                <img src="~/images/@Html.DisplayFor(modelItem => items.Picture)" />
        </div> 
    </div>
}

Answer 1

在 CSS 中试试这个

.row {
 background-image: url("~/images/@Html.DisplayFor(modelItem => items.Picture)");
}

或者像这样:

   <div class="container-fluid">
       @foreach (Item items in Model.Items)
     {
    <div class="row" style=background-image:url("~/images/@Html.DisplayFor (modelItem => items.Picture)">
        <div class="col-md-12 text-center">
                <img src="~/images/@Html.DisplayFor(modelItem => items.Picture)" />
        </div> 
    </div>
     }