Outlook 的 VML 背景图像中带有圆角的头像答案

【问题标题】：Avatar with rounded corners in VML background image for OutlookOutlook 的 VML 背景图像中带有圆角的头像
【发布时间】：2020-10-08 10:14:09
【问题描述】：

我正在处理一些电子邮件模板（上帝保佑），我正在尝试弄清楚如何在相关联系人旁边的表格中显示圆形头像。

目前我正在使用此代码。使用 v:fill 应用背景图像，使用 v:rect 应用边框半径。但是我没有任何成功。

一个要点是我不想在这个元素中包含任何内容。它的存在是为了提供头像图像，所以我一直在努力寻找任何可以帮助我的东西。

帮助不胜感激！

<table>
    <td background="https://picsum.photos/32" width="32" height="32" valign="top" style="border-radius: 50%">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" arcsize="50%" stroke="false" style="width:32px;height:32px;">
        <v:fill type="tile" src="https://picsum.photos/32" arcsize="50%" color="#7bceeb" />
      </v:rect>
      <![endif]-->
    </td>
</table>

【问题讨论】：

标签： outlook html-email vml

【解决方案1】：

我发现该解决方案效果很好。使用<v:oval> 给出形状，使用<v:fill> 给出图像。

虽然我发现我必须将椭圆上的笔画设置为 false，但它似乎默认为打开。

<td width="32" style="margin: 0; padding: 0;">
   <!--[if (gte mso 9)|(IE)]>
      <v:oval xmlns:v="urn:schemas-microsoft-com:vml" fill="true" style='width:32px;height:32px' stroke="false">
         <v:fill type="tile" src="[URL]" />
      </v:oval>
   <![endif]-->
   <!--[if !mso]>-->
      <img style="border-radius: 16px;" width="32" height="32" src="[URL]" />
   <!--<![endif]-->
</td>

然后使用条件语句，我可以将 VML 形状提供给 Outlook，并将常规 <img> 元素提供给支持边框半径的其他所有人。

（根据caniemail.com，基本上是除了前景之外的任何东西）

【讨论】：