Question

我目前正在制作一个必须与主要电子邮件提供商兼容的电子邮件模板。

根据客户端我应该在图像上创建一个称呼段落或标题，所以我尝试了这个解决方案，它在浏览器上工作正常但绝对不在电子邮件上（在Outlook，Hotmail，gmail和yahoo上测试）和其中没有一个读取属性位置：绝对（我认为不确定）。

模板也必须具有响应性，因此如果我调整屏幕大小，文本应根据屏幕宽度进行调整。由于电子邮件存在多个问题，我必须在另一个内部创建2个表，以便在图像周围创建边框，然后在内部创建第二个表以显示图像本身。

文字应该在粉红色的道路标志牌上面，而且它是Hi Margaret，这将是动态的。

这是我的代码：

<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=9" />
      <meta charset="UTF-8">

<style type="text/css">
    body {
        background: #dff1f6 !important;
        font-family: Arial, sans-serif;
    }

    .preheader {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        color: transparent !important;
        height: 0 !important;
        width: 0 !important;
    }

    @media (max-width: 376px) {
        .anglianlogo {
            max-width: 250px !important;
        }

        .anglianwellcome {
            font-size: 11px !important;
        }

        .awvideopreview {
            height: 150px;
        }

        .mobileresize {
            width: 90% !important;
            font-size: 9px;
        }
    }
</style>

<div style="background: #dff1f6;">

    <!--Container-->

    <table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
        <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
        <tr>
            <td style="padding:0px;margin:0px;">&nbsp;</td>
            <td style="padding:0px;margin:0px;" width="600">

                <!--Main Table-->

                <table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; background: white;">
                    <tr>
                        <td>


                            <!--Video-->


                            <table width="600" cellspacing="0" cellpadding="0" border="0" style="padding-bottom: 30px; padding-left:10%; padding-right:10%; width:100%;">
                                <tr>
                                    <td>
                                        <table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center; margin: 0 auto;">
                                            <tr>
                                                <td style="padding: 0; border: 10px solid #72b8d1;">
                                                    <a style="margin: 0 auto; display: block;">
                                                        <!--href="{{ CustomerData.vidUrl }}"-->
                                                        <img class="awvideopreview" src="https://preview.ibb.co/gKOzsv/Videopreview.gif" width="450" border="0" align="center" style="width:100%;">
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>


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

                      <!--End Table-->

                 </td>
                 <td style="padding:0px;margin:0px;">&nbsp;</td>
             </tr>
                <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
         </table>

       <!--End Container-->
    </div>

     </body>
    </html>

Answer 1

CSS课程中有什么内容？请将您的代码放在jsfiddle中，以便我可以通过电子邮件进行测试。电子邮件的HTML采用与普通邮件不同的方法。很多表和内联样式和兼容性问题。

结帐此链接。它可以帮助您找到一些问题。（但现在告诉我们小提琴）

https://www.htmlemailcheck.com/

Answer 2

如果您需要叠加复制

，最好使用背景图片

https://backgrounds.cm/是最好的工具。只需设置尺寸，添加图片链接，这将为您生成VML代码，然后将任何重叠的内容放在div内。

Answer 3

以下是我在电子邮件中使用的示例。 VML部分负责Outlook，并且td中定义的背景负责其他电子邮件客户端。我在td上使用高度将图像保持在特定高度（可选），使用类可以使用媒体查询控制高度。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="background: url([IMAGE PATH]); background-image: url([IMAGE PATH]); background-color:#[BACKGROUND COLOR];" height="[HEIGHT]" class="[YOUR CLASS]">
		
   		<!--[if gte mso 9]>
			<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[WIDTH]px;height:[HEIGHT]px;">
			<v:fill type="frame" src="[IMAGE PATH]" color="#[BACKGROUND COLOR]" />
			<v:textbox inset="0,0,0,0">
		<![endif]--> 

		[HTML CONTENT HERE]

		<!--[if gte mso 9]>
			</v:textbox>
			</v:rect>
		<![endif]-->
   
      </td>
    </tr>
  </tbody>
</table>

请告诉我这是你所追求的。

如何为不同的电子邮件提供商在图像上放置动态文本？（响应电子邮件）

3 个答案:

如何为不同的电子邮件提供商在图像上放置动态文本？ （响应电子邮件）

3 个答案:

如何为不同的电子邮件提供商在图像上放置动态文本？（响应电子邮件）