18

position: absolute を使用せずに、または画像を要素の背景にすることなく、画像の上にテキストを配置できるかどうかを確認しようとしています。
制約の理由は、HTML コードが電子メールに送信されるためであり、hotmail はどちらもサポートしていないことが判明しました。
CSS の勉強を始めたばかりの頃、画像の周りに浮かぶテキストをいじっていたときに、テキストが画像全体に楽しそうに広がってしまうことがよくあったことを覚えています。残念ながら、その動作を再現することはできません。

全文 (編集中):
グラフィック デザイナーから豪華なレイアウトを受け取りました。これは基本的に素敵な背景画像で、ウェブサイトにリンクするロゴと、基本的には「ここにテキストが入る」領域が中央にあります。
これらのケースではいつものように、テーブルを使用して、すべてが所定の位置にとどまり、クロスブラウザ + クロスメールクライアントが機能することを確認しています。
問題は、中央の「テキストがここに入る」領域が白い長方形ではなく、背景にグラフィックがあるという事実から発生します。
いくつかのテストを行った結果、Live Hotmail は絶対位置と背景画像のどちらの位置も好まないようです。相対的なマージンもレイアウトの残りの部分を台無しにするので良くありません。

現在のバージョンは、他のメール クライアント/ウェブサイトで動作します:

...
<td>
<img src='myimage.jpg' width='600' height='400' alt=''>
<p style="position: absolute; top: 120px; width: 500px; padding-left: 30px;">
blablabla<br>
yadda yadda<br>
</p>
</td>
...

もちろん、「それは不可能です」は完全に受け入れられる答えかもしれませんが、そうではないことを願っています ;)

4

6 に答える 6

75

私はテーブルが来るとすぐにこのようなスタントをいつも引っ張っていました。本当に醜いです、そしてあなたがそれをトラフで実行するバリデーターを真剣に当惑させるかもしれません：重なり合うテーブルセル。ほとんどのブラウザで動作しますが、cssがなくても動作します。

例：

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

私は知っています、私はこれに反対票を投じるに値します。

于 2009-12-02T00:17:43.037 に答える
7

絶対測位を使用する場合は、leftとtop属性の両方を指定する必要があります。また、position:relative;絶対配置でその要素が原点として使用されるように、親要素をレイヤーに設定する必要があります。原点を指定しない場合、それはウィンドウまたは他の要素である可能性があり、絶対的に配置された要素がどこに到達するかがわかりません。

要素を互いに重ねて配置する方法は他にもいくつかありますが、それぞれに制限があります。

相対位置を使用して、画像の上にテキストを表示できます。

<img src="..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it's original position,
   placing it on top of the image. However, the text will still take up
   room in it's original position, leaving an empty space below the image.
</div>

別の要素内でフローティング要素を使用して、画像の上にテキストを配置できます。

<div>
   <div style="float:left;">
      This text will be on top of the image. The parent element
      gets no height, as it only contains floating elements.
      However, IE7 and earlier has a bug that gives the parent
      element a height anyway.
   </div>
</div>
<img src="..." alt="" />
于 2009-12-01T23:16:28.127 に答える
3

負のマージンを設定してみてください。これは、最も複雑でないレイアウトを除いて、維持するのが非常に困難です。負のマージン効果は、要素をその方向に「引っ張る」。

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>
于 2009-12-01T23:24:04.747 に答える
2

物事の外観を制御する最良の方法は、テキストを画像自体の一部にすることです。もちろん、高圧縮の jpeg のような非可逆画像フォーマットを使用すると、見た目が非常に悪くなる可能性がありますが、PNG が適しているのではないでしょうか? または、色の数によっては、gif が機能する場合もあります。

これにより、一貫した外観のフォント、フィルタリングなどが得られます。

于 2009-12-01T23:02:13.317 に答える
0

親divとその中に画像と段落がある場合、それら3つすべてに「相対」位置を指定し、子に「z-index」を指定し、「20」画像と「21」をテキストに指定します。画像の上にテキストが表示されます。また、「上、左、右、または下」でテキストを調整できます

CSS
#learning{
margin: 0px;
padding:0px;
height: auto;
width: 100%;
position: relative;

}
#learning>img{
width:inherit;
height:inherit;
margin: 0px;
display: block;
position: relative;
z-index: 20;
}
#learning > p{
font-family: 'droid_serifitalic';
color: white;
font-size: 36px;
position: relative;
top:470px;
left:500px;
z-index: 21;
}
于 2014-12-19T10:52:36.640 に答える