如何在没有文字的情况下制作完整的背景图像电子邮件?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在没有文字的情况下制作完整的背景图像电子邮件?相关的知识,希望对你有一定的参考价值。

我想知道即使没有文字,如何在电子邮件中使背景显示为全宽。即使没有你能看到的文字和它的真实尺寸,我也不知道如何让它出现。我希望结果与此类似,底部的文本就像一个页脚。有人知道怎么做吗?

enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
  <title></title>
</head>

<body>
  <title></title>

  <div class="email-background" style="padding:10px;background:white;">
    <div class="pre-header" style="background:white;font-size:5px;color:white;text-align:left;max-width:500px;">
    </div>
    <!--BODY-->
    <div class="email-container" style="background:white;font-family:Varela Round,arial, sans-serif;color:#03165c;margin:0 auto;max-width:100%;">
      <table class="contenu" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="white">
        <tr>
          <td height="1" style="font-size:1;line-height:1;background:#374b94;">&#160;</td>
        </tr>
        <tr>
          <td valign="top" bgcolor="#374b94" background="https://image.noelshack.com/fichiers/2017/51/4/1513863465-carte2.png" style="background-repeat:no-repeat;background-size:contain;background-position: center; ">
            <!--[if !gte mso 9]><!---->
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
              <v:fill type="tile" src="https://image.noelshack.com/fichiers/2017/51/4/1513863465-carte2.png" color="#374b94">
                <v:textbox inset="0,0,0,0">
                  <!--<![endif]-->
                  <tr>
                    <td>
                      <p align="left" style="font-family:Varela Round,arial, sans-serif;color:#c6c9dc;font-size:10px;">
                        Si vous ne souhaitez plus recevoir d'email cliquez <a class="unsubscribe" href="mailto:desinscription@marketing-idxcel.fr?subject=Désinscription&body=Je%20souhaite%20ne%20plus%20recevoir%20de%20mail%20de%20votre%20part" style="color:#c6c9dc;text-decoration:underline #c6c9dc;">ici</a>

                      </p>

                    </td>

                  </tr>
                  <!--[if !gte mso 9]><!---->
                </v:textbox>
            </v:rect>
            <!--<![endif]-->
          </td>

        </tr>
      </table>
    </div>
    <!--/BODY-->
  </div>
</body>

</html>
答案

对于图像样式 - 添加高度。如果你检查它,你可以看到它只有宽度。

    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
    height: 500px;

    /** or padding: some value **/
    padding-bottom: 40%;

以上是关于如何在没有文字的情况下制作完整的背景图像电子邮件?的主要内容,如果未能解决你的问题,请参考以下文章

如何在不使用背景图像的情况下获得背景磨砂玻璃效果

如何在不使用边框和图像的情况下在 div 上制作 CSS 三角形背景? [复制]

如何制作3层的PDF电子书

如何在C++中用文字制作图片的白色背景

如何在没有抗锯齿的情况下显示缩放图像?

带有背景完整图像的登机屏幕 - SwiftUI