絶対位置またはbackbroundとして画像を設定せずに、画像の上にテキストを配置する方法

Question

私は位置使わずに画像の上にテキストを入れることが可能であるかどうかを確認しようとしている：絶対にや画像ビーイング、要素の背景を持つ
制約の理由は、HTMLコードが電子メールに起こっている、それがhotmailのはどちらをサポートしていることが判明していることである。
私が最初に私は頻繁にテキストが陽気にすべての画像の上に行くになってしまった画像の周りのフロート-INGのテキストの周りいじる、CSSを勉強し始めたとき、私はあることを覚えています。悲しいことに、私はその動作を再現することはできません。

全話（中に編集）：
私は、グラフィックデザイナーから派手なレイアウトを受けました。これは、ウェブサイトとどのような基本的には中央に「テキストをここに」領域があるにリンクロゴと、基本的には素敵な背景画像です。
これらのケースではいつものように、私はすべての場所にとどまり、crossbrowser + crossmailclientを動作することを確認するために、テーブルを使用しています。
問題は、中央のエリアが白い長方形ではありません「というテキストがここに行く」という事実から生じるが、いくつかの背景のグラフィックスを持っています。
いくつかのテストをした、ライブ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>
...

もちろん、「それは不可能です」完全に受け入れ答えであるが、私はないと思いでした;）

Answer 1

私はすぐにテーブルが来たとして、このようなスタントのすべての時間を引くために使用されます。テーブルのセルの重複：本当に醜いしてもよく、真剣に、あなたはそれが谷実行するすべてのバリデータをembarass。でも、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>

Answer 2

あなたは絶対位置を使用している場合、あなたは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="" />

Answer 3

物事の外観を制御するための最良の方法は、画像自体のテキスト部分を作ることであろう。あなたは、高圧縮のJPEGなどの非可逆イメージ形式を使用する場合はもちろん、それは本当に悪い見ることができる、多分PNGはあなたのために働くのだろうか？または、色数に応じて、GIFは動作する可能性があります。

これはまた、あなたの一貫した見栄えのフォント、フィルタリングなどを与えます。

Answer 4

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

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

Answer 5

にあなたはその中の親のdivと画像と段落を持っている場合は、言うそれらのすべての3つの「相対」の位置を与え、子どもたちに「Zインデックス」を与え、「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;
} 

Answer 6

 .main_image{grid-area: overflow;}

    .main_text{
    grid-area:overflow;
    color: white;
    margin: auto auto auto 5%;
    font-size: 2rem;
    line-height: 3rem;} 
    .main{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:1fr; 
    grid-template-areas: "overflow";
    }

    <div class="main">
			
      <div class="main_image">
         <img src="https://images.unsplash.com/photo-1548783300-70b41bc84f56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" style="width:100%; height:auto">
       </div>

       <div class="main_text"> 
            <p>overlap text</p>
            <h2>your text</h2>
            <p>lorem ipsum lorem lorem</p>
       </div>  
   </div>