Question

我想写一个来自数据库的折扣金额到图像上。我拍了一张像这样的照片：

<div style="height: 158px; width: 210px; float: left; position: relative;">
  <a id="aproduct" runat="server">
    <asp:image id="pimage" runat="server" width="210" height="158" border="0" />
  </a>
  <asp:Panel ID="Panel1" runat="server">
    <asp:image id="discountTag" style="position: absolute; top: 0; right: 0;"
               border="0" src="images/PriceTag.png" alt="" 
               height="35px" width="35px" />
  </asp:Panel>
</div>

我想将discountTag图像显示为<td>的背景，并在标签中显示折扣金额。

我尝试这样做，但是当我这样做时，我正在显示我的discountTag标签的大图像没有正确对齐。我希望o / p像大图像上哪个discountTag图像上哪个折扣金额。任何人都可以这样做吗？

Answer 1

您可以将大图像作为div元素的背景，然后使用绝对定位在任何地方放置折扣。示例代码：

<div id="pnlBigImage" runat="server" style="position: relative; background-image: url(images/Penguins.jpg); width: 500px; height: 375px;">
    <span id="lbDiscount" runat="server" style="position: absolute; right: 25px; bottom: 25px; width: 100px; height: 25px; background-color: white;" />
</div>

在后面的代码中：

lbDiscount.InnerHtml = "value from database here...";

重要的是将大图像的实际宽度和高度作为div元素的宽度和高度，否则它将无法正确对齐。

在图像上写文字

1 个答案: