时间戳

首页 > 解决方案 > 带有圆形背景的 Outlook 圆形图像

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

问题描述

我正在尝试开发一个电子邮件模板。我需要在前景中具有圆形背景的圆形图像。这是代码和Outlook 输出，这不是我想要开发的。

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

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

标签： cssimageoutlookemail-templates

解决方案

一种解决方案是将您的图像包装在一个 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%;
    }

推荐阅读