如何使用CSS在<table>上定位/覆盖透明*png？

Question

问题

我需要在表元素上放置一个透明的png图像.

澄清

"地方"是指图像将像层或贴纸一样堆叠在桌面上,而不是垂直地放在桌面上方.换句话说,我希望我的图像在z轴上向前移动而不是在y轴上向上移动.

上下文

我有8 x 6的细胞桌.单元格不包含文本,但包含背景颜色以暗示值.出于美观原因,我想在桌子上放置一个白色的剪影设计.

我试过的

我已经尝试将表格包装在div中,将图像应用为背景,然后尝试在z-index上将其向前移动.

HTML的基本演示:

<div class="table-foreground">
    <table>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>

随附CSS的基本演示:

td{
background-color:#000;
}

div.table-foreground{
background-image:url(images/table-foreground.png);
position:relative;
z-index:5;
}

结果

注意:科学家要求我提供我尝试过的代码的结果.

在视觉上,没有任何反应.我推测带有png图像的div作为它的背景在我的桌子下面.这表明我的代码还不够.

Answer 1

1. 将表格包装在 div 中（位置：相对；）
2. 把你的桌子放进去
3. 将图像放入 div 中（位置：绝对；顶部：Y；左侧：X；）
4. 更改 X 和 Y，直到它位于桌子上您想要的位置。

<div style="position: relative;">
    <table>

    </table>
    <div style="background-image: url('picURL'); position: absolute; top: Y; left: X; width:Xpx;height;Ypx;">
    </div>
</div>