由于 HTML 签名,Apple Mail 背景为白色
Apple Mail Background White Because of HTML Signature
我在 HTML 中创建了一个 电子邮件签名,我在 Mac 和 iPhone.
我也在使用深色模式,但遗憾的是,如果我使用我的签名,我电子邮件的背景会变成白色。我测试了它,因为我在签名中包含的图像。
有什么方法可以防止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;">
</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> · <a href="https://www.linkedin.com" style="border:none; text-decoration:none; color:#b0b0b0;">LinkedIn</a></span>
</td>
</tr>
</table>
</td>
</tr>
</table><br />
</body>
这是电子邮件签名的屏幕截图(出于隐私原因,黑框)。发送电子邮件或将其保存为草稿后,电子邮件的背景立即变为白色。如果我稍后编辑草稿,背景将保持白色。
感谢您的回答!
开
MacOS 大苏尔 11.3.1
苹果邮件版本 14.0 (3654.80.0.2.43)
一切正常,所以可能是旧版本的问题?
除非您有图像,否则 Apple Mail 将允许暗模式,在这种情况下,您需要仔细设置它以保留暗模式功能。如果您没有正确设置它,它将关闭深色模式 - 因此是白色背景。
看起来您的 <meta>
部分设置没问题:但是,您可以尝试将其放在 <body>
.
上方的 <head>
部分
但您似乎缺少您想要的背景颜色。
所以,在正文上放一个 class:<body class="darkmode">
,然后向 class 添加一些样式:
@media (prefers-color-scheme: dark) {
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
}
我遇到了同样的问题(或者至少听起来几乎相同),我认为只是解决了这个问题。您是否让 Gmail 调整图像大小?例如,您选择“小号”、“中号”还是“大号”尺寸?
我的解决方案是以我需要的精确分辨率上传图片,并强制 Gmail 向它们显示“原始”上传大小。现在背景在黑暗模式下再次显示为黑色,不需要额外的 html、css 等。这似乎是 Apple 的邮件应用程序和 Gmail 之间的 bug/issue 图片大小调整。
我整晚都在为这件事焦头烂额,因为它肯定是通过添加图像触发的,而且我知道其他人也有它的作用。我搜索了一下,除了你的帖子,什么也没找到。但我终于成功了,我希望这也能解决你的问题!
我在 HTML 中创建了一个 电子邮件签名,我在 Mac 和 iPhone.
我也在使用深色模式,但遗憾的是,如果我使用我的签名,我电子邮件的背景会变成白色。我测试了它,因为我在签名中包含的图像。
有什么方法可以防止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;">
</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> · <a href="https://www.linkedin.com" style="border:none; text-decoration:none; color:#b0b0b0;">LinkedIn</a></span>
</td>
</tr>
</table>
</td>
</tr>
</table><br />
</body>
这是电子邮件签名的屏幕截图(出于隐私原因,黑框)。发送电子邮件或将其保存为草稿后,电子邮件的背景立即变为白色。如果我稍后编辑草稿,背景将保持白色。
感谢您的回答!
开 MacOS 大苏尔 11.3.1 苹果邮件版本 14.0 (3654.80.0.2.43)
一切正常,所以可能是旧版本的问题?
除非您有图像,否则 Apple Mail 将允许暗模式,在这种情况下,您需要仔细设置它以保留暗模式功能。如果您没有正确设置它,它将关闭深色模式 - 因此是白色背景。
看起来您的 <meta>
部分设置没问题:但是,您可以尝试将其放在 <body>
.
<head>
部分
但您似乎缺少您想要的背景颜色。
所以,在正文上放一个 class:<body class="darkmode">
,然后向 class 添加一些样式:
@media (prefers-color-scheme: dark) {
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
}
我遇到了同样的问题(或者至少听起来几乎相同),我认为只是解决了这个问题。您是否让 Gmail 调整图像大小?例如,您选择“小号”、“中号”还是“大号”尺寸?
我的解决方案是以我需要的精确分辨率上传图片,并强制 Gmail 向它们显示“原始”上传大小。现在背景在黑暗模式下再次显示为黑色,不需要额外的 html、css 等。这似乎是 Apple 的邮件应用程序和 Gmail 之间的 bug/issue 图片大小调整。
我整晚都在为这件事焦头烂额,因为它肯定是通过添加图像触发的,而且我知道其他人也有它的作用。我搜索了一下,除了你的帖子,什么也没找到。但我终于成功了,我希望这也能解决你的问题!