css - 如何在使用 CSS 时定位/覆盖透明 *png？问题 我需要在表格元素上放置一个透明的 png 图像。 澄清 “放置”是指图像将像图层或贴纸一样堆叠在桌子顶部，而不是垂直上方。换句话说，我希望我的图像在 z 轴上向前移动，而不是在 y 轴上向上移动。 语境 我有 8 x 6 单元格表。单元格不包含文本，但包含暗示值的背景颜色。出于美学原因，我想在桌子上放置一个白色的剪影设计。

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>