如何在图像上放置标签答案

【问题标题】：How to put a label over an image如何在图像上放置标签
【发布时间】：2011-03-25 15:40:48
【问题描述】：

我试图寻找一种可能的解决方案，但目前还没有找到。你能帮我看看如何在图像上添加文本。下面是我的代码，我希望 lblWelcome 和 lblUsername 出现在图像上。

    <img alt="Logo" src="../Resources/Images/Header.gif" style="height: 70px; width: 1000px;"/>

     <asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>

     <asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>

如果有人可以帮助我，我会很高兴。

TIA, 苏

【问题讨论】：

标签： c# asp.net .net-3.5

【解决方案1】：

另一种方法是将您的图像设置为元素的背景图像，并将您的文本作为子元素例如

<div style="background-image: url(../Resources/Images/Header.gif);height:70px;width:1000px;" >     
     <asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>

     <asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
    </div>

【讨论】：

非常感谢。这解决了我的问题。

【解决方案2】：

使用如下所示的 Css：

<style type="text/css">

.lblposition {
  position:absolute;
  left:789px;
  top:30px;   
  height: 21px;
  width: 65px;
}
</style>

在标签中使用这个 css，如下所示：

<asp:Label ID ="lbl" runat="server" Text="Search" BackColor="Red" ForeColor="Blue"   CssClass ="lblposition"></asp:Label>

【讨论】：

【解决方案3】：

<table>
    <tr>
        <td style="background-image:url("Images/image1.jpg"); height:20px; width:20px;">
            <asp:label ID="Lbl1" runat="server" Text="" Fore-color="Red" />
        </td>
    </tr> 
</table>

【讨论】：

如果你对你的方法提供一些额外的评论会很好:)
表格用于限制图像的位置并获得相同的标签。在 div 的情况下也需要类似的方法。