如何使用CSS将透明的PNG图片定位/覆盖在<table>上？

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位于我的表格下方。这表明我的代码不足以完成任务。

- Dominor Novus

Answer 1

1. 将您的表格包装在一个div中（position: relative;）
2. 将您的表格放在里面
3. 将您的图片放在div中（position: absolute; top: Y; left: 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>

- circusdei

---

感谢您的解释和代码，但是使用您的示例我无法产生所需的结果。错误可能在我的部分。 - Dominor Novus