0

私は、地球上で単純なことになると思ったことをやろうとしています。このボックス内に表示しようとしていた画像の一部をカバーすることを想定したグラフィック要素を含むpngボックスがあります（これは製品ボックスであり、グラフィック要素は値札をシミュレートすることになっています）。

そのため、ボックスが必要で、asp：ImageButtonを使用してその下に画像を表示したいと思いました。

私はこれに何時間も苦労していて、divや画像などを入れようとしています。zオーダーでさまざまなことを試しましたが、成功しませんでしたが、製品の画像はまだグラフィックボックスの上に表示されています。しかし、それがうまく機能している価格に足を踏み入れてください。

私はこれがうまくいくはずだと思った：

<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

少し曲がったアイデアを思いつきましたが、時間がないので、今のところうまくいけば問題ありません。

アイデアをスケッチします。基本的に、imagebutton は最高の z オーダーを取得すると思うので、その背後にあることを期待して div の上に配置する意味はありません。私の解決策は、imagebuttonを取り出して、divを使用して画像を配置し、完全に透明なimagebuttonを上に配置することでした。

次のようになります。

<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 に答える
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 に答える