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，您可以根据自己的喜好调整颜色，内边距和边框半径。

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

简单而全面的解决方案...
创建一个圆角的图像，然后在图像中包括背景色，或使用VML创建圆角的颜色。

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

2 个答案: