Question

我正在尝试制作类似披萨制造商的东西。

基本上，我要做的就是在另一幅图像的顶部添加半透明图像。

我以为我可以通过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>
.
.

Answer 1

您不需要z-index。使用绝对定位。稍后在DOM中的元素将位于顶部。另外，不要使用表来定位元素。这只是不好的做法。表格是表格数据，比萨饼不是（我认为）。

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

请注意，该牌照有position: relative。需要一个位置来迫使层绝对定位在板内。这样，你可以轻松地移动盘子，比萨饼随之移动。如果需要，可以将盘子放在桌子上，这样就可以显示比萨饼了。小提琴中的CSS将自动为您修复。您可以通过给它一个margin: 0 auto将它在父级中水平居中，这样它就会在父单元格中居中。

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

在表格单元格中叠加两张图片

1 个答案: