web-dev-qa-db-ja.com

絶対配置や画像を背景に設定せずに画像上にテキストを配置する方法

位置を使用せずに画像の上にテキストを配置することが可能かどうかを確認しようとしています：絶対的であるか、画像が要素の背景であるか。
制約の理由は、HTMLコードが電子メールに送られるためであり、hotmailはどちらもサポートしていないことがわかります。
私が初めてCSSの勉強を始めたとき、画像の周りに浮遊するテキストをいじくり回して、テキストが画像全体に楽しそうに行き渡ったことがよくありました。悲しいことに、私はその振る舞いを再現することができません。

全文（編集）：
グラフィックデザイナーから豪華なレイアウトを受け取りました。これは基本的には素敵な背景画像で、ロゴはWebサイトにリンクしており、基本的には中央にある「テキストがここに表示されます」領域です。
これらの場合はいつものように、テーブルを使用して、すべてが適切な場所にあり、クロスブラウザ+クロスメールクライアントで機能することを確認しています。
この問題は、中央の「テキストがここに移動する」領域が白い長方形ではなく、背景グラフィックがいくつかあるという事実から発生します。
いくつかのテストを行ったところ、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>
...

もちろん、「不可能」は完全に許容できる答えかもしれませんが、私はそうは思いません;）

htmlcsscss-floatcss-positionhotmail
13
Agos

テーブルが来るやいなや、私はいつもこのようにスタントを引っ張っていました。本当に醜く、あなたがそれを実行するバリデーターを真剣に恥ずかしく思うかもしれません：テーブルのセルのオーバーラップ。ほとんどのブラウザで動作しますが、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>

私は知っている、私はこれに反対の投票に値する。

69
Zano

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

要素を互いの上に配置する他の方法がいくつかあり、それぞれに独自の制限があります。

画像の上にテキストを表示するには、相対配置を使用できます。

<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="" />
6
Guffa

外観を制御する最良の方法は、テキストを画像自体の一部にすることです。もちろん、高圧縮でjpegのような損失の多い画像形式を使用すると、見栄えが悪くなる可能性がありますが、PNGでうまくいくでしょうか？または、色の数によっては、gifが機能する場合があります。

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

3
Andy West

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

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>
2
G-Wiz

たとえば、親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;
}
0
River CR Phoenix