分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何将图像添加到 html 电子邮件背景？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到如何将图像添加到 html 电子邮件背景？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何将图像添加到 html 电子邮件背景？的解决方法建议，希望对你解决如何将图像添加到 html 电子邮件背景？有所启发或帮助；

我正在尝试为生日创建自动电子邮件脚本。但是，我可以发送带有图像作为附件的文本电子邮件，但我希望图像位于文本的背景中。就像你打开一些网站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,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

解决方法

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

<div style="BACkground-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:BACkground xmlns:v="urn:scheR_604_11845@as-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: 链接引用图片。>