image - 表格rowspan透明图像

Question

我的 table 有问题。我想要在时事通讯的右上角有一个具有透明背景的图像。代码如下:

<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>

问题似乎出在行跨度上，但我只是觉得很奇怪，我有一个具有透明背景的 .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>

看起来像这样

请注意，您需要在带有图像的 td 内添加一个额外的 div，否则 td 会垂直扩展至与图像一样高(即使您将其高度显式设置为 0；那没有帮助)。另请注意，您需要为表格指定明确的高度，否则它将不知道需要多高才能容纳溢出的图像。

JSFiddle