如何用Inline CSS在邮件图片上叠加文字？现有代码遇问题求助

邮件客户端（如Outlook、Gmail）对CSS的支持远不如浏览器，position:absolute这类属性几乎不被支持，这就是你用绝对定位叠加失效的原因。以下是两种可行的兼容方案：

方案一：基础表格背景方案（兼容多数现代邮件客户端） #

用表格单元格的背景图配合内边距控制文字位置，替代绝对定位：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <style>
        table {border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
        td {border-collapse: collapse;}
    </style>
</head>
<body style="margin:0; padding:0;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <!-- 替换[图片高度]为你实际图片的高度值 -->
            <td style="width:550px; height:[图片高度]px; background-image:url('imageUrl'); background-size:cover; background-position:center; padding:120px 0 0 150px;">
                <h1 style="color:black; margin:0;">Person name</h1>
            </td>
        </tr>
    </table>
</body>
</html>

方案二：兼容Outlook的完整方案 #

旧版Outlook用Word引擎渲染，不支持CSS背景图，需要借助VML（矢量标记语言）做兼容：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <style>
        table {border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
        td {border-collapse: collapse;}
        v\:* {behavior:url(#default#VML); display:inline-block;}
    </style>
</head>
<body style="margin:0; padding:0;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <!-- 替换[图片高度]为你实际图片的高度值 -->
            <td width="550px" height="[图片高度]px" style="position:relative;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:550px; height:[图片高度]px;">
                    <v:fill type="tile" src="imageUrl" color="#ffffff" />
                    <v:textbox inset="0,0,0,0">
                <![endif]-->
                <div style="padding:120px 0 0 150px;">
                    <h1 style="color:black; margin:0;">Person name</h1>
                </div>
                <!--[if gte mso 9]>
                    </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
    </table>
</body>
</html>

关键注意事项 #

• 所有样式优先用内联写法，邮件客户端对内部/外部样式表支持有限。
• 图片必须用绝对URL，不能用相对路径。
• 用padding替代margin控制文字位置，margin在部分客户端表现不稳定。
• 替换代码中的[图片高度]为你使用图片的实际像素高度，确保容器尺寸与图片匹配。

内容的提问来源于stack exchange，提问作者Semih