表行跨透明图像

Question

我的桌子有问题。我希望在简报的右上角有一个透明背景的图像。这是代码：

<table>
    <tr>
        <td>
            <img src="header.png" alt="header" class="headerImg" />
        </td>
        <td rowspan="3">
            <img src="circle.png" alt="header" class="rightHeaderImg" />
        </td>
    </tr>
    <tr>   
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

问题似乎与rowspan有关，但我认为我有一个透明背景的.png图像很奇怪，当它在td中显示时，它的背景颜色是实心的。

Answer 1

如果您希望图片与其下方的行重叠，则可以让图片溢出td，而不是让td为行。

所以解决方案就像这样

<table style="background:purple; border-spacing:0; height:112px">
  <tr>
    <td>top</td>
    <td>top</td>
    <td style="vertical-align:top">
      <div style="height:0;"><img src="circle.png" alt=""></div>
    </td>
  </tr>
  <tr style="background:#999">
    <td>bottom</td>
    <td>bottom</td>
    <td><!--empty--></td>
  </tr>
</table>

看起来像这样

请注意，您需要在图像中使用额外的div，否则td将垂直展开以与图像一样高（即使您要将其高度明确设置为0;这也不会'帮助）。另请注意，您需要为表格提供一个明确的高度，否则它将无法知道如何容纳溢出的图像。

JSFiddle

Answer 2

好的，这就是我想要它做的事情：

<table border="1">
  <tr style="background:purple;">
    <td>top</td>
    <td>top</td>
    <td rowspan="2"><img src="circle.png" alt="header"/></td>
  </tr>
  <tr style="background:#999">
    <td>bottom</td>
    <!-- room for td above -->
    <td>bottom</td>
  </tr>
</table>

我希望圆圈图像能够以某种方式使其td透明，以便紫色tr和灰色tr的颜色显示在图像后面。它不应该使用divs og定位元素来解决。