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

【问题标题】：How to put text on picture that comes out of a database?如何将文本放在来自数据库的图片上？
【发布时间】：2018-06-28 00:10:03
【问题描述】：

我正在使用引导程序，我的图片在我的行和列中，但我找不到在这张图片上放置文字的方法。有没有办法让这成为可能？

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

【问题讨论】：

将图片设置为div的背景，并将文字放在div中。
感谢您的回复，但是当它来自数据库时，这是否可能？图片保存在数据库中，据我所知您不能将其设置为背景图片，如果可以，我应该怎么做？
@SeeSharp 当然可以。如果您不能使用它，那么在数据库中拥有一张图片将毫无意义。只需将图片设置为div的背景图片即可。
我将如何在 foreach 的小代码中做到这一点？

标签： html css asp.net twitter-bootstrap

【解决方案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>
     }

【讨论】：

这不起作用。它没有显示任何图片。这可能是因为 css 对模型一无所知。
如果您可以在页面上显示图像，那么您可以将其用作 css 属性。
我现在有它，它不想显示图像。{
@foreach（模型中的项目。项目）{

@Html.DisplayFor(modelItem => items.Name)

} }
当我拥有它时，图片会显示在页面上，就像我一开始一样。问题是只要它需要成为背景图像，它就不再显示了。
那么当页面加载这段代码时，客户端的源代码是什么样的？