html - PNG的HTML 3层

Question

一张桌子上可以有 3 层 png 吗？我正在尝试这样做：

这是一个有 6 列的表。

• 灰色箭头 - 表背景图像
• 红色箭头 - 表格中的 PNG
• 蓝色箭头 - 热门产品横幅悬停

我在photoshop中做了这个渲染，我很好奇这是否可能我有一个可以使用蓝色和灰色的设置，但是让那个上面写着Top Products的栏似乎是一个挑战。请注意，这是在 Magento CMS 页面中完成的

编辑：这是我到目前为止的代码

<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="120" background="http://the-garage.net/homefiles/background/section1.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section2.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td width="150" height="120" background="http://the-garage.net/homefiles/background/section3.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section4.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section5.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
<td  width="150" height="120" background="http://the-garage.net/homefiles/background/section6.jpg"><img src="http://www.the-garage.net/homefiles/testproduct.png" height="130" /></td>
</tr>
<tr>
<td> Description</td>
<td> Description</td>
<td> Description</td>
<td> Description</td>
<td> Description</td>
<td> Description</td>
</tr>

</table>

Answer 1

确保您的表格使用绝对位置：

table {
position:absolute;
}

之后，设置顶部、左侧、右侧或底部值以设置要放置表格的位置。

Answer 2

您可以将该表放在包装器中，使包装器位置相对。然后添加顶级产品横幅并将其绝对定位。确保为横幅提供高 z-index 或将其放在包装器的最后。