如何在使用CSS？<table> </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;
}

结果

注意： thescientist 要求我提供我尝试过的代码的结果。

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

Answer 1

1. 将您的表格包装在div（position：relative;）
中
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>