Question

我正在尝试为生日创建自动电子邮件脚本。但是，我可以发送带有图像作为附件的文本电子邮件，但我希望图像位于文本的背景中。就像你打开一些网站this is a birthday email style that I'm trying to clone一样。我已经设置了所有其他东西，但是当我测试它时，背景图像没有出现。只是文本框

这是我写的代码：我不是一个真诚的程序员。和 ~ 在那里，以便函数将读取 html 文件并将 ~ 替换为我的消息[愿望]。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="with=device-with, initial-scale=1.0">
        <style>
            *
            {
                margin: 0;
                padding: 0;
                font-family: 'Poppins', sans-serif;
            }
            .header
            {
                background-image: url('birthday.png');

                background-repeat: repeat-y no-repeat;

                background-color: #333;


                min-height: 100vh;
                width: 100%;
                background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url =("/images/birthday.png");
                background-position: center;
                background-size: cover;
                position: relative;
            }
            .text-box
            {
                color:;
                background: transparent;
                position: absolute;
                background-color: aliceblue;
                width: auto;
                height: auto;
                margin: 5% 5%;
                border-radius: 10px;
                padding: 0px;
            }
            .tin-line
            {
                position: relative;
                top: 10%;
                background-color: cornflowerblue;
                width: 100%;
                height: 10px;
                border-radius: 1px;
            }
            .message-box
            {
                position: relative;
                top: 13%;
                padding: 10px;
            }
            p
            {
                font-family: cursive;
                font-size: 15px;
                font-weight: 600;
                text-align: center;
                color: black;
            }
            .last
            {
                position: relative;
                bottom: 5%;
                padding: 10px;
                font-family: cursive;
                font-size: 20px;
                font-weight: 700;
            }
            .head
            {
                position: relative;
                top: 5%;
                height: 50px;
                width: 100%;
                margin: auto;
                text-align: center;
                font-family: cursive;

            }
        </style>
    </head>
    <body>

        <section class="header">
            <div class="text-box">
                <div class="head"><h1>✨HAPPY BIRTHDAY!✨</h1></div>


                <div class="tin-line">
                </div>
                <div class="message-box"><br>

                    <p>~</p>
               </div>
                <div class="last">
                    <p>Best wishes,<br> Dillon</p>
                </div>

            </div>

        </section>
    </body>
</html>

这是输出： Results of email output

Answer 1

backgrounds.cm 上的一些建议可能会有所帮助。将您的消息包裹在表格中并将背景应用于单元格。请注意，有两个地方定义了图像 url：

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png">

      Your message here

      </td>
    </tr>
  </table>
</div>

如果您想附加图片，则需要使用 Content-Disposition: inline 和 Content-ID: 标题作为附件，并使用 cid: 链接引用图片。

如何将图像添加到 html 电子邮件背景？

1 个答案: