Question

我已经尝试了几个小时来构建一个包含图像内部文本的电子邮件正文。我试过这段代码，但文字总是显示在图片下面。有什么想法吗？

代码：

<body style="margin: 0 !important; padding: 0;background-color: #486380;">
    <center style="width: 100%;background-color: #486380;">
        <table style="width: 100%; max-width: 800px;">
            <tr>
                <td>
                    <table width="100%" style="margin-top: 15px;margin-bottom: 15px">
                        <tr>
                            <td>
                                <div style="position: relative">
                                    <center>
                                        <img style="position: absolute" src="img/test.png" alt="Login" />
                                        <span style="position: absolute">Hello everyone</span>
                                    </center>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </center>
</body>

Answer 1

我建议的最佳解决方案是将图片作为背景（td）并在其上构建文字内容。

使用https://backgrounds.cm/生成相应的代码，并在div代码之间添加文字。还建议使用透明的png垫片用这种方法填充任何空白区域。

Answer 2

CSS java.util.HashMap#get为，因此在图像上实现实时文字不是一个很好的选择。

Gwesolo建议的一个选择是使用背景图像。您可以使用not well supported in email clients生成代码，并在电子邮件客户端中获得相当好的覆盖率。甚至桌面Outlook！但是根据图像的设计或它出现的盒子的尺寸，它可能需要一些技巧。

第二种选择是使用像backgrounds.cm这样的服务，它可以生成内置自定义文字的动态图片。它不是可访问的，也可能无法在移动设备上显示，但它可以显示一种简单，直截了当的方法。

Answer 3

你想“涵盖所有基础：原样。我认为最好的方法是使用td样式，inline-css和backgrounds.cm工具。

<body style="margin: 0 !important; padding: 0;background-color: #486380;">
    <center style="width: 100%;background-color: #486380;">
        <table style="width: 100%; max-width: 800px;">
            <tr>
                <td align="center" width="600">
                    <table width="100%">
                        <tr>
                            <td background="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" style="background-image:url(http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg; background-repeat: no-repeat") align="center">
                                <div style="margin:auto;">
                                       <p> <span style="font-size: 24px; text-align: center; color: #ffffff">Hello everyone</span></p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </center>
</body>

在电子邮件正文中将一些文本放入图像中

3 个答案: