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 中的元素将位于顶部。另外，不要使用表格来定位元素。那只是不好的做法。表格用于表格数据，比萨饼不是（我认为）。

所以在这个小提琴中，我得到了一个用作容器的“盘子”。在（in）板上是每一层的div。我使用了背景颜色和不透明度，但您也可以使用背景图像（或只是 img 标签）。

请注意，该板具有position: relative. 需要一个位置来强制层在板内绝对定位。这样，您可以轻松地移动盘子，比萨饼也会随之移动。如果需要，您可以将盘子放在表格单元格中，这样您就可以显示一张比萨饼的桌子。小提琴中的 css 会自动为您解决这个问题。您可以通过给它一个 将板水平margin: 0 auto居中在其父单元中，这样它就在父单元格中居中。

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

于 2012-09-11T19:48:57.740 回答