0

我正在尝试做我认为将是地球上最简单的事情。我有一些带有图形元素的 png 框，它假设覆盖了我打算在这个框内显示的图像的一部分（这是一个产品框，图形元素应该模拟价格标签）。

所以我需要这个盒子，我想用asp:ImageButton在它下面显示图像。

我已经为此苦苦挣扎了几个小时，试图放置 div 和图像等。用 z-order 尝试了各种事情，但没有成功，产品图像仍然显示在图形框上方。不过，考虑到它一直运行良好的价格。

我认为这应该工作：

<div id="HPItemBox">
        <div id="HPItemPriceBox">
            <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
        </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
        <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>
    </div>
</div>

也试过：

<div id="HPItemBox">
    <div id="HPItemPriceBox">
        <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
    </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
            z-index: 10;">
        </div>
        <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>
    </div>
</div>

有css：

#HPItemBox
{
    position: relative;
    width: 190px;
    height: 190px;
    background-image: url('../images/home-product-box.png');
    background-repeat: no-repeat;
    background-color: #ffffff;
    float: left;
    z-index: 50;
}

.HPItemPrice
{
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #4d4d4d;
}

.HPimgBox
{
    position: relative;
    top: -10px;
    right: 20px;
    width: 170px;
    z-index: 10;
}

有任何想法吗？提前致谢。

4

2 回答 2

0

嘿，我认为您的代码有些错误，请根据您的要求管理您的代码，并对您的 css 文件进行一些更改，如下所示

HTML

<div id="HPItemBox">
    <div id="HPItemPriceBox">
        <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
    </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
            z-index: 10;">



                Hello



                <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>

        </div>

    </div>
</div>

CSS

#HPItemBox
{
    position: relative;
    width: 190px;
    height: 190px;
    background-image: url('../images/home-product-box.png');
    background-repeat: no-repeat;
    background-color:red;
    float: left;
    z-index: 50;
}

.HPItemPrice
{
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #4d4d4d;
     position: relative;
}

#HPItemLink
{
    position: absolute;
    bottom: 10px;
    left: 10px;

    z-index: 10;
    border:solid 2px yellow;
}

现场演示在这里查看http://jsfiddle.net/8yg49/1/

于 2012-04-27T07:37:54.260 回答
0

我想出了一个有点歪曲的想法，但我的时间很短，所以如果它现在有效，我没问题。

我会勾勒出这个想法。基本上，我认为 imagebutton 获得最高的 z 顺序，所以没有必要将它放在任何 div 之上，希望它会驻留在它后面。所以我的解决方案是取出图像按钮并使用一些 div 放置图像，然后在上方放置一个完全透明的图像按钮。

它是这样的：

<div id="HPItemBox"> 
        <div id="HPItemPriceBox"> 
            <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label> 
        </div> 
    <div id="imgBox" runat="server" class="HPimgBox"> 
        <div id="HPItemLink"> 
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton> 
        </div> 
    </div> 
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>

这样，实际图像显示在框架 div 下，按钮实际上是一个矩形透明图像，因此我想要显示的图像显示为按钮（但没有“点击”影响。

于 2012-05-02T10:34:39.247 回答