如何在上放置/覆盖透明 *png使用CSS？

Question

问题

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

澄清

我所说的“放置”是指图像将像层或贴纸一样堆叠在桌子顶部，而不是垂直位于其上方。换句话说，我希望图像在 z 轴上向前移动，而不是在 y 轴上向上移动。

上下文

我有 8 x 6 单元格表。单元格不包含文本，但包含背景颜色以暗示值。出于美观原因，我想在桌子上放置一个白色轮廓设计。

我尝试过

将表格包装在 div 中，将图像应用为背景，然后尝试将其在 z 索引上向前移动。

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>