2

テーブルに問題があります。ニュースレターの右上隅に背景が透明な画像が必要です。コードは次のとおりです。

<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に表示されると背景色が単色になるのは奇妙だと思います。

4

2 に答える 2

2

画像をその下の行にオーバーラップさせたい場合は、行スパンを指定するの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

于 2013-01-08T16:00:06.670 に答える
0

わかりましたので、これが私がやりたいことです:

<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 の両方の色が画像の背後に表示されるようにします。配置された要素の div を使用して解決しないでください。

ここに画像の説明を入力

于 2013-01-09T07:24:44.313 に答える