2023年8月Gmail中HTML邮件body背景色失效求可用代码示例

Gmail会过滤掉<body>标签的背景样式以及<head>内的大部分CSS规则，要实现全局背景色，必须用外层嵌套表格的方式模拟，以下是经过测试在2023年8月Gmail环境下生效的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gmail背景色测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
    <!-- 最外层表格模拟全局背景 -->
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" role="presentation" style="background-color: #f0f0f0; margin: 0; padding: 0; width: 100%; height: 100vh;">
        <tr>
            <td align="center" valign="top">
                <!-- 内容容器表格 -->
                <table cellpadding="0" cellspacing="0" border="0" width="600" role="presentation" style="background-color: #ffffff; margin: 20px auto; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <tr>
                        <td style="padding: 20px;">
                            <h1 style="font-family: Arial, sans-serif; color: #333333;">测试内容</h1>
                            <p style="font-family: Arial, sans-serif; color: #666666; line-height: 1.6;">这是一封在Gmail中能正确显示全局灰色背景的HTML邮件示例。</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

关键注意事项： #

• 必须用最外层<table>作为背景载体，不能依赖<body>的background-color属性
• 所有样式必须用内联样式（inline style），Gmail会移除<style>标签内的规则
• 外层表格设置width:100%和height:100vh确保覆盖整个视口
• 添加role="presentation"让屏幕阅读器忽略表格的结构意义

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