响应式电子邮件：HTML表格中的图像文本

Question

将单片图像作为正文的表：

我怎样才能完成这个？我想在两个圆圈内插入文字。 3圈图像只是一张图像。

我的表已经响应了，如果我把这个带有文本的图像作为图像的一部分，它已经调整了大小，但这些单词是不可读的。当我在营销云中使用动态内容时，我需要将其作为文本。

建议？

 table.moduleSection td.bg img {
            height: auto;
            width: 100%;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
            position: relative;


        }
table.moduleSection td.bg p {
           width:100%;
           height: 100%;
        
        }

 <!-- 4 START MODULE -->
              <table class="moduleSection" width="640">
                <tr>
                    <td valign="top" height="100%" class="bg" align="center" bgcolor="#ffffff" width="100%" style="font-family: Arial, sans-serif; font-size: 14px; color:#233251;line-height: 20px; margin: 0;">

                        <img src="http://single-image-here" alt="">

                        <p>Here some goes text</p>

                    </td>
                </tr>
               </table> 
<!-- 4 END MODULE -->

Answer 1

从您发布的代码段中，您的模板似乎是纯粹的响应。您可以使用[backgrounds.cm]（https://backgrounds.cm/）工具为outlook放置背景（并为其他电子邮件客户端添加），并在其上方添加表格以将文本放在图像上。一旦到达屏幕大小的断点，就可以切换图像并更改包含副本的单元格的宽度/高度。

我在下面举了一个例子，说明你如何做到这一点。

table.moduleSection td.bg img {
            height: auto;
            width: 100%;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
            transition: all 1s ease;
            position: relative;


	}
table.moduleSection td.bg p {
           width:100%;
           height: 100%;
        
}

@media only screen and (max-width : 480px) {
	.moduleSection{width:100%;}
	.moduleSection .bg{ background-size:300px auto !important;height:200px !important;}
	.moduleSection .bg .text{padding-top:60px!important;}
	
}

<!-- 4 START MODULE -->
              <table class="moduleSection" width="640">
                <tr>
                    <td valign="top" height="100%" class="bg" align="center" bgcolor="#ffffff" width="100%" style="font-family: Arial, sans-serif; font-size: 14px; color:#233251;line-height: 20px; margin: 0;height:100px; background-image:url('https://thumbs.dreamstime.com/z/put-your-text-here-2493239.jpg'); background-size:30% auto;background-repeat: no-repeat; background-position:center center;">
 <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:650px;height:134px;">
    <v:fill type="frame" src="https://thumbs.dreamstime.com/z/put-your-text-here-2493239.jpg" color="#e9e9e9" />
    <v:textbox inset="0,0,0,0">
  <![endif]--> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="284">&nbsp;</td>
      <td width="110" style="padding-top:40px;" class="text"> Here some goes text</td>
      <td width="238">&nbsp;</td>
    </tr>
  </tbody>
</table>


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

                    </td>
                </tr>
               </table> 
<!-- 4 END MODULE -->