缩略图上的文本答案

【问题标题】：Text over Thumbnail缩略图上的文本
【发布时间】：2017-07-26 23:53:35
【问题描述】：

我需要在一些缩略图上加上价格（文字）。我发现以下代码有效..

CSS

.col-md-4 {
    display: table;
}

.thumbnail{
    position:relative;
}

.thumbnail img{
    max-width:100%;
}

.thumbnail h1{
  position:absolute;
  top:50%;
  left:0;
  color:lightgrey;
  width:100%;
  text-align:center;
  transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
  margin:0;
}

ASP.NET

<div class="col-md-4">
    <div class="thumbnail">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
         <h1>Hello</h1>
    </div>
</div>

但是，我想尝试将上述内容集成到以下复杂的代码行中，但我不知道从哪里开始（它是为我编写的）。这是行..

Dim liByLiteral As New LiteralControl("<li><a href='http://images.example.com/" & filenameAndPrice(0) & "' class=""nyroModal"" rel=""gal" & DataBinder.Eval(e.Item.DataItem, "accountID").ToString & """ title=""" & filenameAndPrice(2) & " - PRICE: £" & filenameAndPrice(4) & """ onclick=""openImage('" & filenameAndPrice(1) & "', '" & txtItem.ClientID & "', '" & filenameAndPrice(0) & "');""><img class='lazy" & opacity & "' data-src='http://images.example.com/thumbnails/" & filenameAndPrice(0) & "' height='120' width='120' src='./files/images/loader.png' /></a></li>")

filenameAndPrice(4) 是商品的价格。我很高兴它被添加到 Nyromodal 标题中，但也需要显示在缩略图上。非常感谢任何帮助。

【问题讨论】：

你想从服务器获取它吗？

标签： css asp.net vb.net

【解决方案1】：

添加 runat 服务器属性并为您的 html 控件提供 ID。

<div class="col-md-4">
        <div class="thumbnail">
            <img runat="server" id="tmdiv" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
             <h1 runat="server" id="myheaderid" >Hello</h1>
        </div>
    </div>

在服务器上，现在您可以访问这些并可以添加任何 html 属性。喜欢;

   myheaderid.InnerHtml= liByLiteral 
   tmdiv.atrributes.add("title", filenameAndPrice(4))

【讨论】：

您好，感谢您的建议。如果我有点迷路，我只是在学习，所以道歉。我的问题中的 Asp.Net 代码只是我发现的一个示例。这是我需要以某种方式操作的那长长的 VB 代码行。