响应电子邮件：HTML表格文字在图像

我怎么能acomplish呢？我想在两个圆圈内插入文字。 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 -->

来源

2017-04-11 srocksss

哪里文本您有麻烦？此外，你的表格标记缺少开放的'table'，'tr'和'td'标签。此外，使用'table'布局被认为是不好的做法，嵌套表格更是如此。 –

小心你的代码，看起来这最后三个标签是多余的''。 –

是的，表格很糟糕，我们比较老的电子邮件客户端。使用div和浮动文本将成为一种选择？是否更容易完成？ – srocksss

从代码段，你已经张贴看来你的模板是纯粹的响应。您可以使用[backgrounds.cm]（https://backgrounds.cm/）工具为Outlook放置背景（并为其他电子邮件客户端添加内容），并添加上面的表格以将文本放在图像上。一旦在screenize中达到中断点，您就可以切换图像并更改包含副本的单元格的宽度/高度。

我已经给出了一个如何做到这一点的例子。

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; 
 

 

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

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

<!-- 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 -->

来源

2017-04-13 02:02:41 Syfer

响应电子邮件：HTML表格文字在图像

回答

相关问题