Question

我正在尝试做我认为将成为世界上简单事物的事情。我有一些带有图形元素的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;
}

有什么想法吗？谢谢你提前。

Answer 1

嘿，我认为您的代码有些错误请根据您管理您的代码，并对您的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/

Answer 2

我提出了一个有点歪曲的想法，但我的时间很短，所以如果它现在有用，那对我来说很好。

我会勾勒出这个想法。基本上，我认为图像按钮获得最高的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下，按钮实际上是一个矩形透明图像，因此我想显示的图像显示为按钮（但没有“点击”效果。

无法使用z顺序以便将一张图片显示在另一张图片之上

2 个答案: