问题
我需要在表格元素上放置一个透明的 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 在我的桌子下方。这表明我的代码是不够的。