具有圆形背景的 Outlook 圆形图像

Question

我正在尝试开发电子邮件模板。我在 outlook 中需要一个带有圆形背景的圆形图像。这是代码和 outlook output 这不是我要开发的。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <div>
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:80px;v-text-anchor:middle;width:80px;" arcsize="50%" strokecolor="#EB7035" fillcolor="#EB7035">
                    <w:anchorlock/>
                    <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">

                        <img style="width: 80px;height: 80px;border-radius: 50%; background-color: #e0f6fc;" width="80px" height="80px" align="center" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR13vYIvuNYydJxdMvpmCPXyqzDeUcJIxvdJV1T2GT9FgMyTTiGhw">
                    </center>
                </v:roundrect>
                <![endif]-->
                <!--[if mso]>
                    <img style="width: 80px;height: 80px;border-radius: 50%; background-color: #e0f6fc;" width="80px" height="80px" align="center" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR13vYIvuNYydJxdMvpmCPXyqzDeUcJIxvdJV1T2GT9FgMyTTiGhw">
                <![endif]-->
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

我真正想要的是一个带边框的简单圆形框，里面有一个简单的圆形图像（框的中心）。有什么想法吗？

Answer 1

一种解决方案是将图像包裹在 div 中，以将图像裁剪成 border-radius: 50% 和 overflow: hidden 的圆圈。然后将 div 包裹在另一个 div 中以创建圆形背景颜色。这是一些入门 HTML 和 CSS，您可以根据自己的喜好调整颜色、填充和 border-radius。

HTML

  <div class="img-container">
    <div class="img_crop">
        <img src="your-image" alt="Logo">
    </div>
  </div>

CSS

    .img-container {
      width: 300px;
      padding: 40px;
      background-color: blue;
      border-radius: 130px;
    }
    .img_crop {
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      width: 100%;
    }

Answer 2

简单且full-proof修复...
创建圆形图像并在图像中包含背景颜色或使用 VML 创建圆形颜色。

具有圆形背景的 Outlook 圆形图像

Outlook rounded image with rounded background

css

outlook

image

email-templates