Outlook округленное изображение с закругленным фоном - PullRequest
Новая
       21

Outlook округленное изображение с закругленным фоном

0 голосов
/ 25 июня 2019

Я пытаюсь разработать шаблон электронной почты.Мне нужно округленное изображение с закругленным фоном в перспективе.Вот код и вывод 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>

То, что я точно хочу, - это простая закругленная рамка с рамкой, в которой есть простаяокруглое изображение внутри (центр коробки).Есть идеи?

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

Простое и полное исправление ...
Создайте округленное изображение и включите в него цвет фона или используйте VML для создания округленного цвета.

0 голосов
/ 25 июня 2019

Одним из решений было бы заключить ваше изображение в 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%;
    }
...