Question

在我的屏幕顶部，我有一个ASP.NET超链接，其中包含代表公司和应用程序的图像。我想使用CSS图层将文本或一些控件显示在代表productEdition的右下角的超链接/图像上。

我无法发布ASP.NET超链接标记，因为它会导致错误，但它有一个ImageUrl。哦，它在一个小组中。见下文：

<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->           
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
    <asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" NavigateURl="~/Default.aspx" ToolTip="Home Page">   
    </asp:HyperLink>
</asp:panel>

使用某些答案中的技巧，我有这个工作 - 文字在图片的顶部，但它一直到左边。我需要它一直到右边。

   <asp:panel ID="toppanel" CssClass='wrapper' runat="server">
        <!--Top Menu-->           
        <asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">

         <div id="Header" style="position: relative; z-index: 1">
          <%--div style="position:absolute;z-index:1">--%>
              <asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" 
              NavigateURl="~/Default.aspx" ToolTip="Home Page">   
              </asp:HyperLink>

               <div style="position:absolute;top:60px; right:400px; width:600px; height:100px; z-index:2;font-size:200%">
                   <b>Testing...</b>
               </div>
         <%--</div>--%>
 </div>`

Answer 1

您可以创建一个div以使图像与其中的版本重叠。您可以在此处阅读重叠元素：http://www.w3schools.com/css/css_positioning.asp

希望这会有所帮助，祝你好运！

Answer 2

您可以在链接图像周围以及文本周围（也在DIV内）包裹DIV。给包装DIV一个样式“position：relative”并给出文本DIV的绝对定位。或者，不是使用绝对定位，而是可以向右或向左浮动，使用边距等将其居中，

Answer 3

以下是一些教程：

http://www.html.net/tutorials/css/lesson15.php

OR

http://www.xul.fr/en/css/text-over-image.php

Answer 4

以下是解决方案：

<div id="Header" style="position: relative; z-index: 1">

                <asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" 
                               NavigateURl="~/Default.aspx" ToolTip="Home Page"/>   

                <div style="position:absolute;top:60px; left:800px; width:600px; height:100px; z-index:2;font-size:200%">
                    <%--<b>Testing...</b>--%>
                    <asp:Label runat="server" ></asp:Label>
                </div>

            </div>

如何在ASP.NET Image上添加CSS图层？

4 个答案: