ここに私が達成しようとしているものがあります： ピクセルの太い白い四角が画像をオーバーレイしたいと思います。 
電子メールの「ヘアライン」エフェクトのオーバーレイ画像
（http://i.imgur.com/hKuZblq.png）
Webページに、これは簡単ですが、私はいくつかのオプション（下記参照）を持っています。問題は、どれも電子メールと広く互換性がないということです。
私は画像の上に置くことができる透明な背景に白い正方形のgifを持っています。
Iは画像の上にそれを配置するz屈折率と絶対配置を使用することができます。
<div style='position:relative;'>
<img src=http://i.imgur.com/fBP9Pxn.jpg style='width:585px;height:440px;position:absolute;z-index:10;'>
<img src=http://i.imgur.com/Hb9jGED.gif style='width:585px;height:440px;position:absolute;z-index:20;'>
</div>Iはまた、DIVまたはテーブルセルの背景画像として主画像を設定し、DIVまたは細胞の内部オーバーレイイメージを置くことができます。代わりに、オーバーレイの
<table>
<tbody>
<td style='background-image:url(http://i.imgur.com/fBP9Pxn.jpg);background-size:100% 100%;'>
<img src=http://i.imgur.com/Hb9jGED.gif />
</td>
</table>、私は、背景画像とdiv要素を持っており、透明な背景と白のボーダーとそのdivの場所の内側に別のdiv、そして親にパディングを持つことができますインセットを強制するDIV：
<div style='background-image:url(http://i.imgur.com/fBP9Pxn.jpg);background-size:100% 100%;height:440px;width:585px;display:block;padding:15px;'>
<div style='display:block;width:585px;height:440px;border:1px solid white'></div>
</div>これらはすべて正常に動作します。問題は私が電子メールを扱っていることです。
メールアドレス：
絶対配置は一貫してサポートされていません。多くの電子メールクライアントはそれを無視し、最初のイメージを2番目のイメージのすぐ下に配置します。
背景画像は広くサポートされていますが、background-sizeはメールクライアントではほとんど無視されます。私のイメージは様々なサイズを持つことができ、それは受け入れられないクロップされてしまいます。
メールに収まるように適切なサイズの画像を生成してから、background-imageオプションを使用して、私が望むことを達成できます。それはOutlook 2007で効果を機能させるために必要とされるフォールバックとしてVML（svgのMicrosoftのバージョン）を使用しているためhttps://litmus.com/community/learning/25-understanding-background-images-in-email
コードは少し醜いです：それは、テンプレートがここで提供して、私は現在、やっているものです/ 10/16分の13（興味深いことに、03は正常に動作するようです）
<table>
<tbody>
<tr>
<td background="http://i.imgur.com/0JUOCnf.png" bgcolor="#7bceeb" width="585" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:585px;">
<v:fill type="tile" src="http://i.imgur.com/0JUOCnf.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://i.imgur.com/Hb9jGED.gif" alt="Exterior" width="585" style="width:585px;" />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>私もそれの上に重ね広場を持つ画像を生成することができます。しかし、生成されたイメージを保存するための記憶スペースだけでなく、各電子メールのイメージを生成するのにはオーバーヘッドが非常に多くなります。
電子メールと広く互換性のある方法で（メールごとにカスタム画像を生成せずに）欲しいものを達成するにはどうしたらいいですか？