以下是我正在嘗試完成的操作： 我想要一個像素厚的白色方塊疊加圖像。 
在電子郵件中爲「髮際線」效果疊加圖像
（http://i.imgur.com/hKuZblq.png）
在網頁中，這是容易的，我有幾個選項（見下文）。問題是，他們沒有廣泛兼容的電子郵件：
我有一個透明背景上的白色正方形的GIF，我可以放在圖像的頂部。
我可以用絕對定位用z-index將其放置在圖像的頂部。
<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>我還可以設置主圖像作爲股利或表格單元格的背景圖像，並把股利或細胞內的覆蓋圖像。
<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>所有這些工作正常。問題是我正在處理電子郵件。
電子郵件：
絕對定位並未得到持續支持。許多電子郵件客戶端會忽略它，只將第一張圖片放在第二張圖片的正下方。
背景圖片得到了更廣泛的支持，但background-size在很大程度上被電子郵件客戶端忽略。我的圖片可能有不同的尺寸，最終會裁剪出來，這是不可接受的。
我可以通過生成適合電子郵件的正確大小的圖像來完成我想要的操作，然後使用background-image選項。這就是我目前在做什麼，與模板這裏提供：https://litmus.com/community/learning/25-understanding-background-images-in-email
的代碼是有點難看，因爲它使用VML（微軟的svg版本）作爲備用，這是爲了使效果工作在Outlook 2007所需/ 10/13/16（有趣的是，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>我甚至可以產生上有重疊的正方形的圖像。但是，爲每個電子郵件生成圖像以及存儲生成圖像的存儲空間需要很多開銷，因爲人們使用Web工具來動態生成這些電子郵件。
那麼，有沒有辦法以與電子郵件廣泛兼容的方式完成我想要的功能（不會爲每封電子郵件生成自定義圖像）？