image - 表格行跨度透明图片

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>

问题似乎与行跨度有关，但我只是觉得我有一个具有透明背景的 .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 内添加一个额外的内容，否则 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 定位元素来解决。