How to put a label over an image

问题

I was trying to look out for a possible solution and am yet to find one. Could you help me out how to add a text over an image. Below is my code and I want lblWelcome and lblUsername to come over the image.

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

Would be glad if someone can help me with this.

TIA, Su

回答1:

Another way can be by setting your image as the background image of an element and have your text as the child element e.g.

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

Use Css like Given Below:

<style type="text/css">

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

Use this css in label like below:

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

来源：https://stackoverflow.com/questions/3412400/how-to-put-a-label-over-an-image

标签

ASP.NET

.net-3.5