苹果邮件背景变白因为 HTML 签名

5
我在HTML中创建了电子邮件签名,并在Mac和iPhone上使用原生的Apple Mail应用程序。我也使用了“暗模式”,但是遗憾的是,如果我使用我的签名,我的电子邮件的背景会变成白色,这是因为我在签名中包含的图像。有没有办法防止Apple Mail显示白色背景?我希望背景是黑色的(就像纯文本电子邮件一样)。在Apple Mail设置中激活了“在消息中使用深色背景”的选项,在我的HTML代码中,我没有定义背景颜色...我使用的是macOS Catalina 10.15.7,Apple Mail版本为13.4。这是我的签名的HTML代码(当然,我在此处发表它时没有包含真实的联系信息)。一切都正常工作,只是背景是白色的。
<body><br /><br /><br />
<style type="text/css">
    :root {Color-scheme: light dark; supported-color-schemes:light dark;}
    a {margin:0; padding:0; border:none; text-decoration:none;}
    table, tr, td, a, span {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px;}
    img {border-radius: 50%;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />

<table width="320" cellspacing="0" cellpadding="0" border-spacing="0" style="width:85px; margin:0; padding:0;">
    <tr>
        <td valign="top" width="80" style="width:80px; margin:0; padding:0; vertical-align:top;">
            <img moz-do-not-send="true" src="URL OF IMAGE" alt="MY NAME" width="80" height="80" style="border:none; width:80px; height:80px; display:block; border-radius: 50%;">
        </td>
        <td width="10" style="width:10px; min-width:10px; max-width:10px; margin:0; padding:0;">
            &nbsp;
        </td>
        <td style="margin:0; padding:0;">
            <table cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0; margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; mso-line-height-rule:exactly; line-height:25px; color:#b0b0b0; border-collapse:collapse; -webkit-text-size-adjust:none;">
                <tr style="margin:0; padding:0;">
                    <td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
                        <b><span style="color:#0099cc;">MY NAME</span></b>
                    </td>
                </tr>
                <tr style="margin:0; padding:0;">
                    <td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
                        <a href="mailto:MY EMAIL ADDRESS" style="border:none; text-decoration:none; color:#b0b0b0;"><span style="color:#b0b0b0">MY EMAIL ADDRESS</span></a>
                    </td>
                </tr>
                <tr style="margin:0; padding:0;">
                    <td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
                        <span style="color:#b0b0b0"><a href="https://www.example.com" style="border:none; text-decoration:none; color:#b0b0b0;">domain.com</a> &middot; <a href="https://www.linkedin.com" style="border:none; text-decoration:none; color:#b0b0b0;">LinkedIn</a></span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table><br />
&nbsp;
</body>

这是电子邮件签名的屏幕截图(出于隐私原因,黑色框)。一旦我发送电子邮件或将其保存为草稿,邮件的背景就会变成白色。如果稍后编辑草稿,背景仍然保持白色。 E-Mail signature with white background 感谢您的答复!

2
那张图片不应该导致你的整个签名都有白色背景。你能在帖子中提供截图吗?这样可以更好地理解发生了什么。 - user2958788
我在原始问题中添加了一张截图。希望这能帮到你! - user15374596
3个回答

1
我遇到了同样的问题(或者听起来几乎一样),我认为只是绕过了它。你让 Gmail 调整图片大小了吗?比如,你选择了“小”、“中”或“大”尺寸吗?
对我来说,解决方案是以我需要的精确分辨率上传图像,并强制 Gmail 显示它们的“原始”上传大小。现在,在暗模式下,背景再次显示为黑色,不需要额外的 html、css 等。这似乎是 Apple 的邮件应用程序和 Gmail 之间的缺陷/问题,涉及图像调整大小。
我整晚都在因为这个问题而抓狂,因为它肯定是由添加图片触发的,而我知道其他人已经解决了这个问题。我搜索了很多,但没有找到任何东西,只有你的帖子。但最终我让它工作了,我希望这也能解决你的问题!

1
谢谢您的回答!我已经将图像裁剪到我想要的确切大小。我的电子邮件现在有一个黑色背景,但来自我的 Gmail 地址的回复仍然是白色的。我认为我无法改变这种情况。 我怀疑这是 Gmail 和/或我的 macOS 版本的问题(请参见 https://dev59.com/NMDqa4cB1Zd3GeqPhqCl#67476576)。但是我可以接受现在的状态 - 至少我可以非常清楚地看到哪些电子邮件是来自我的 :D 再次感谢 :) 我希望这个帖子能帮助那些遇到类似问题的人! - user15374596

0

如果你使用的是苹果邮件,它会允许暗黑模式,但如果你有一张图片,就需要仔细设置以保留暗黑模式的功能。如果你没有正确设置,它将关闭暗黑模式,因此出现白色背景。

看起来你已经设置好了<meta>部分:但是,你可以尝试将其放在<head>部分上方的<body>

但是看起来你缺少想要的背景颜色。

所以,在上加一个类:<body class="darkmode">,并为该类添加一些样式:

@media (prefers-color-scheme: dark) { 
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
} 

我编辑了HTML代码,现在它可以工作了!谢谢 :) 最后一个问题:我给另一个Gmail地址发送了一封电子邮件,并回复了我的测试电子邮件。回复再次具有白色背景。来自我的原始电子邮件地址的第二个回复再次具有深色背景,因此“故障”肯定是出在另一个Gmail地址上。 我能够影响回复的背景颜色吗?(当然假设我没有对其他电子邮件地址进行控制。) - user15374596
1
@user15374596 嗯,试图控制这个可能会徒劳无功。 - Nathan

-1

在MacOS Big Sur 11.3.1上,使用的是Apple Mail版本14.0 (3654.80.0.2.43)。

一切都正常工作,也许这是一个旧版本的问题?

Screen


1
也许是因为找不到图片?能否尝试将 HTML 代码中的 "URL OF IMAGE" 替换为实际图像的 URL 呢?如果这样可以正常工作,那么就可能是旧版本的问题了... - user15374596
1
@user15374596 它的工作方式相同 https://ibb.co/QNbQwBB - KryBor_BK
谢谢!那么很明显这是我的当前版本的问题...可惜我无法更新以进行验证,因为我的Mac太旧了。对于任何遇到同样问题的人,@Nathan(https://dev59.com/NMDqa4cB1Zd3GeqPhqCl#67479127)的建议解决了我的问题。 - user15374596

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接