如何使用 CSS 在 <table> 上放置/覆盖透明的 *png？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6629274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I position/overlay a transparent *png over a <table> using CSS?
提问by Dominor Novus
The problem
问题
I need to place a transparent png image over a table element.
我需要在表格元素上放置一个透明的 png 图像。
Clarification
澄清
By "place" I mean the image will be stacked on top of table like a layer or sticker rather than vertically above it. In other words, I want my image to move forward on the z axis rather than moving upward on the y axis.
通过“放置”，我的意思是图像将像图层或贴纸一样堆叠在桌子顶部，而不是垂直上方。换句话说，我希望我的图像在 z 轴上向前移动，而不是在 y 轴上向上移动。
Context
语境
I have 8 x 6 cell table. The cells do not contain text but do contain a background color to imply a value. I want to place a white silhouetted design over the table for aesthetic reasons.
我有 8 x 6 单元格表。单元格不包含文本，但包含背景颜色以暗示值。出于美学原因，我想在桌子上放置一个白色的轮廓设计。
What I've tried
我试过的
I've tried wrapping the table in a div, applying the image as a background and then tried bringing it forward on the z-index.
我尝试将表格包装在一个 div 中，将图像应用为背景，然后尝试将它放在 z-index 上。
Basic demonstration of HTML:
HTML的基本演示：
<div class="table-foreground">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
Basic demonstration of accompanying CSS:
随附 CSS 的基本演示：
td{
background-color:#000;
}
div.table-foreground{
background-image:url(images/table-foreground.png);
position:relative;
z-index:5;
}
The result
结果
Note: thescientistrequested that I provide the result of my attempted code.
注意：科学家要求我提供我尝试编写的代码的结果。
Visually, nothing happens. I speculate that the div with the png image as it's background is beneath my table. This suggests that my code is not sufficient.
在视觉上，什么也没有发生。我推测带有 png 图像的 div 作为它的背景在我的桌子下方。这表明我的代码是不够的。
回答by circusdei
- wrap your table in a div (position: relative;)
- put your table inside
- put your image inside the div (position: absolute; top: Y; left: X;)
- change X and Y until it's where you want it over the table.
- 用 div 包裹你的桌子（位置：相对；）
- 把你的桌子放在里面
- 将您的图像放在 div 中（位置：绝对；顶部：Y；左侧：X；）
- 改变 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>
