如何将背景图片添加到 html 电子邮件的正文中？答案

【问题标题】：How to add a background image to the body of a html email?如何将背景图片添加到 html 电子邮件的正文中？
【发布时间】：2019-09-03 09:26:21
【问题描述】：

如何将背景图片添加到 html 电子邮件的正文中？下面粘贴的是我的CSS 样式：

<style type="text/css" media="screen">

    /* Linked Styles */
    body { 
        background:#000; 
        padding:0 !important; 
        margin:0 !important; 
        display:block !important; -webkit-text-size-adjust:none; 
        background-image:url(images/t1_free_bg.jpg); background- 
        repeat:no-repeat; background-size: cover; background-position:0  
     }

     a { 
         color:#e85853; 
         text-decoration:none 
     }

     p { 
         padding:0 !important; 
         margin:0 !important 
     } 

     img { 
         -ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */ 
     }

     .mcnPreviewText { 
        display: none !important; 
     }


    /* Mobile styles */
    @media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
        u + .body .gwfw { width:100% !important; width:100vw !important; }

        .m-shell { width: 100% !important; min-width: 100% !important; }

        .m-center { text-align: center !important; }
        .center { margin: 0 auto !important; }

        .td { width: 100% !important; min-width: 100% !important; }
        .h2 { font-size: 35px !important; line-height: 40px !important; }
        .nav { font-size: 12px !important; line-height: 22px !important; padding: 10px !important; }

        .m-br-15 { height: 15px !important; }
        .p0-15-30 { padding: 0px 15px 30px 15px !important; }
        .p0-20-30 { padding: 0px 20px 30px 20px !important; }
        .p30-0 { padding: 30px 0px !important; }
        .p30-20 { padding: 30px 20px !important; }
        .pb30 { padding-bottom: 30px !important; }
        .p10 { padding: 10px !important; }

        .m-td,
        .m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }

        .m-block { display: block !important; }

        .fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; }

        .column,
        .column-dir,
        .column-top,
        .column-bottom,
        .column-dir-top { float: left !important; width: 100% !important; display: block !important; }

        .content-spacing { width: 15px !important; }
    }
</style>

任何帮助将不胜感激！

【问题讨论】：

我觉得我的代码快到了。现在图像像素化/模糊，在某些浏览器中它没有覆盖整个页面。图片当前尺寸为 1366x1024。
您可以添加您的 HTML 代码吗？你也可以考虑制作一个代码沙箱，这样我们就可以看到发生了什么？
我不知道这是否会影响您当前的问题，但您可能希望通过将绝对“px”单位更改为相对“em”或“%”单位来使其成为更具响应性的设计.例如。将“15px”更改为“1em”。
这不适用于使用 Outlook 2007-2019 的任何人。

标签： css html-email document-body

【解决方案1】：

我最近遇到了这样的问题。就我而言，我没有正确指定图像路径。确保您的路径（相对或绝对）正确。

【讨论】：