如何在 ASP.NET 图像上添加 CSS 层？答案

【问题标题】：How do I CSS layer on top of ASP.NET Image?如何在 ASP.NET 图像上添加 CSS 层？
【发布时间】：2013-06-29 01:39:22
【问题描述】：

在我的屏幕顶部，我有一个 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>`

【问题讨论】：

向我们展示您的编码方式，否则我们将无法为您提供帮助。
没有 div 但
请使用该信息编辑您的问题。
我不能。即使有代码块，它也不会让我把 HTML 放在那里！！
我刚刚测试过，您可以在代码块中发布 html。另外，既然你已经把你的代码放在那里，我投票决定重新开放。

标签： asp.net css

【解决方案1】：

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

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

【讨论】：

我看了，我可以将 Z-Index 设为 -1，但如何确保它被放置在超链接控件中的图像顶部？
把 Hyperlink 控件放在一个 div 中，然后使用 Z-Index 来控制哪个元素是重叠的。我通常在我的 div 上设置边框，直到它们被正确定位。它使人们更容易理解正在发生的事情。例如，在一个 div 中放置边框：2px 纯红色；另一个放边框：2px纯黑色；您可以使用它直到它们被定位，然后移除边框。

【解决方案2】：

您可以让 DIV 环绕链接的图像以及文本（也在 DIV 中）。给环绕的 DIV 一个样式“位置：相对”，并给文本 DIV 绝对定位。或者，您可以不使用绝对定位，而是将其向右或向左浮动、居中、使用边距等。

【讨论】：

【解决方案3】：

这里有一些教程供您参考：

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

或

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

【讨论】：

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

【讨论】：