HTML 3的PNG图层

Question

桌子上可以有3层png吗？ 我想这样做：

这是一个包含6列的表格。

• 灰色箭头 - 表Backgorund图像
• 红色箭头 - 表格中的PNG
• 蓝箭 - 顶级产品横幅悬停

我在photoshop中做了这个渲染，我很好奇，如果这是可能的，我有一个可以使用蓝色和灰色的设置，但是获得顶级产品顶部的条形似乎是一个挑战。请注意，这是在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;
}

然后设置top，left，right或bottom值以设置放置表格的位置。

Answer 2

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