Question

这是我想要完成的事情：我想要一个像素厚的白色方块来覆盖图像。

（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>

我还可以将主图像设置为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>

所有这些都很好。问题是我正在处理电子邮件。

电子邮件：

不能始终如一地支持绝对定位。许多电子邮件客户端会忽略它，只是将第一个图像直接放在第二个图像下面。

背景图片得到更广泛的支持，但电子邮件客户端很大程度上忽略了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工具来动态生成这些电子邮件。

那么，无论如何都要以与电子邮件广泛兼容的方式完成我想要的（不为每封电子邮件生成自定义图像）吗？

Answer 1

一年半之后，我发现：
否，没有可靠的方法在电子邮件客户端中执行此操作。为此，我们只为每封电子邮件呈现自定义图像。这有点烦人，但开销合理，我们得到了很好的结果。

在电子邮件

1 个答案: