イメージ上にテキストを配置する方法（電子メール）？

Question

これは不可能なので：::after for inline HTML email?

テキストを下の画像に重ねるにはどうすればよいですか？

positionと負のマージンは、電子メールでサポートされていないようだということを覚えておいてください。

<img src="http://www.livetochallenge.com/assets/blue-banner.png"> 
<div style="display: inline-block;"> # Put this text on banner 
    Put<br> 
    Over<br> 
    Image 
</div> 

Answer 1

電子メールのテキストオーバーイメージに関しては、テキストをイメージにレンダリングし、ALTタグを提供することが最も安全な方法です。これにより、デバイスや電子メールのクライアントに関係なく、すべてのテキストが常にイメージ上にあることを100％保証します。そこにいる多くのクライアントは背景画像をサポートしていないので、正しくレンダリングすることができますが、2009年のOutlookを使用しているユーザーは常にあります。

私の同僚の一部は、 ：https://backgrounds.cm/ - ただし、すべてのクライアント/デバイスでは機能しません。

もう1つの解決策は、背景を「見せかける」ことです。たとえば、テキストが単色のグラフィックス上にある場合、それを個別にスライスして背景色を使用できます。そうすれば、テキストはまだ生きています。たとえば、あなたが提供した画像はバナーのように見えます。中間部分は＃2E3E65という背景色の単なるTDなので、周囲の要素にはあなたが提供したバナー画像があります。

しかし、私の強い示唆はイメージルートに行くことです。次に、編集と対比して、反応的なテストに焦点を当てることができます。私は助けてくれるといいですね。

EDIT はこれを見ている：https://www.campaignmonitor.com/css/ コードのルートを行くこと絶対必要であれば、それは要素/タグ/プロパティは、すべての主要な電子メールクライアント上で動作するものを示して非常に便利なガイドです。 また、彼らはライブテキスト :-)

EDIT 2

私はちょうどインラインここにすべてをした上で主張すれば、クライアントに渡すために有益な情報とすることができます。スタイルタグに入れて、その中に（htmlの代わりに）スタイルを追加するだけなら、マークアップを大幅にクリーンアップすることができます。

<table style="width:300px; border-collapse: collapse; margin: 0; padding: 0; border: none;"> 
<tr style="height: 54px;"> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://www.livetochallenge.com/assets/blue-banner.png" style="margin: 0; padding: 0;"/></td> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none;"><div style="background-color: #354871; height: 37px; color: white; text-align: center; padding-top: 15px;"># Put this text on banner</div></td> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://i.imgur.com/OgwtHvr.png" style="margin: 0; padding: 0;"/></td> 
</tr> 
</table> 

下図のようにこれは "ファッジ" 効果が得られます： 。

注 - 私はちょうど画像を水平に反転するためにPhotoshopを使用しました。また、わずかな色の変化は無視してください。これは、反転したイメージをどのようにエクスポートしたかの問題です。