0

ピザメーカーに似たものを作ろうとしています。

基本的に、私がやろうとしているのは、別の画像の上に半透明の画像を追加することだけです。

CSSとz-indexプロパティを使用してこれを実現できると思いましたが、いくつか問題があります。

写真はうまくオーバーレイされていますが、一生の間、テーブルセルの中央に配置することはできません。

これが私が思いついたものです。ただし、配置によって画像がテーブルセルの外に移動します。

 <table style="width:400px" border="1">
        <tr>
                <td align="center">
                 <div style="position: fixed; z-index:100">   
                    <asp:ImageButton ID="imgbtn_pizzabase" ImageAlign="Middle" ImageUrl="~/SiteImages/pizza_test.png" runat="server" />
                </div>
                <div style="position: fixed; z-index:5000"> 
                    <asp:ImageButton ID="ImageButton1"  ImageAlign="Middle" ImageUrl="~/SiteImages/findme.png" runat="server" />
                </div> 

               </td>
        </tr>
.
.

。

4

1 に答える 1

0

z-indexは必要ありません。絶対測位を使用します。後でDOMにある要素が、一番上になります。また、要素の配置にテーブルを使用しないでください。それは悪い習慣です。表は表形式のデータ用ですが、ピザはそうではありません（私は思います）。

それで、このフィドルで、私はコンテナとして使用される「プレート」を手に入れました。プレート上（内）には、各レイヤーのdivがあります。背景色と不透明度を使用しましたが、背景画像（またはimgタグ）も使用できます。

プレートには。があることに注意してくださいposition: relative。層をプレート内に完全に配置するには、位置が必要です。そうすれば、プレートを簡単に動かすことができ、ピザも一緒に動きます。必要に応じて、プレートをテーブルセルに入れて、ピザのテーブルを表示することができます。フィドルのcssは自動的にそれを修正します。margin: 0 autoプレートを親セルの中央に配置するには、プレートを親の中央に配置します。

http://jsfiddle.net/GolezTrol/nyzrT/1/

于 2012-09-11T19:48:57.740 に答える