web-dev-qa-db-ja.com

相対配置を使用した画像上のテキストオーバーレイ

画像の上にテキストを重ねて配置したい。以下は私の現在使用しているコードです：

<td width="10%">
  <img src="tempballoon.png" alt="balloon" style="z-index: -1" />
  <div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none">
    Test
  </div>
</td>

私の問題は、テキストが適切にオーバーレイされていても、<td>で消費する「スペース」がまだ残っていることです。 <div>の「top」の位置を「margin-top」に置き換えようとすると、<img>にも影響するため、<img>は<td>の境界を超えます。

htmlcssimagecss-positionoverlay
12
Water

あなたが欲しいposition: absoluteおよびcontainer to be relative：

<td width="10%" style="position: relative;">
    <img src="tempballoon.png" alt="balloon"  style="z-index: -1"/>
    <div style="position:absolute;left:0px;top:0px;font-size: 32px;display: none">
      Test
    </div>
</td>
29
Blender

TD画像をdivの背景に設定し、テキストをdivにドロップしてください。

<td width="10%">
 <div style="background: transparent url("tempballoon.png") no-repeat left top; font-size: 32px;width: 100%; height: height:[height of image]">
  Test
 </div>
</td>
2
CBRRacer