Apple 邮件背景因 HTML 签名而变白
问题描述 投票：0回答：4
我已经在 HTML 中创建了一个电子邮件签名，我在 Mac 和 iPhone 上将它与本机 Apple Mail-app 一起使用。
我也在使用深色模式，但遗憾的是，如果我使用我的签名，我电子邮件的背景会变成白色。我测试了它，它是因为我在签名中包含的图像。
有什么方法可以防止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>
这是电子邮件签名的屏幕截图（出于隐私原因，黑框）。发送电子邮件或将其保存为草稿后，电子邮件的背景立即变为白色。如果我稍后编辑草稿，背景将保持白色。
谢谢您的回答！
4个回答
1
投票
投票
我遇到了同样的问题（或者至少听起来几乎相同），我认为只是解决了它。您是否让 Gmail 调整图像大小？比如，你选择“小号”、“中号”还是“大号”尺寸？
我的解决方案是以我需要的精确分辨率上传图像，并强制 Gmail 向它们显示“原始”上传大小。现在背景在黑暗模式下再次显示为黑色，不需要额外的 html、css 等。这似乎是 Apple 的邮件应用程序和 Gmail 之间图像大小调整的错误/问题。
我整晚都在为此烦恼，因为它肯定是通过添加图像触发的，而且我知道其他人已经成功了。我搜索了一下，除了你的帖子，什么也没找到。但我终于让它工作了，我希望这也能解决你的问题！
0
投票
投票
上 MacOS 大苏尔 11.3.1 苹果邮件版本 14.0 (3654.80.0.2.43)
一切正常，所以可能是旧版本问题？
-1
投票
投票
Apple Mail 将允许暗模式，除非您有图像，在这种情况下，您需要仔细设置它以保留暗模式功能。如果您没有正确设置它，它将关闭暗模式 - 因此是白色背景。
看起来您的
<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; }
}
-2
投票
投票
早上好， 不好意思挖帖子！ 我正在尝试创建一个 HTML-CSS 电子邮件签名。 您的帖子和回答帮助我解决了白色背景问题（非常感谢@Nathan、@user15374596！）。 但是问题仍然存在：当我从 Apple Mail 发送或从带有签名的 Outlook web 在 Apple Mail 上接收电子邮件时，即使在黑暗模式下它也会正确显示，另一方面在邮件正文中（我不应该在其中显示）已经介入！！）即使在黑暗模式下，文本也会显示为黑色，这使得它无法阅读！ 我对 HTML-CSS 编程的了解非常有限，我真的不明白问题出在哪里！
从 outlook web 发送带有签名的电子邮件时，我还有另一个问题：我的电子邮件进入收件人的垃圾邮件文件夹。 x_x
真希望有人能告诉我如何解决这些问题！
我附上我的文件，放纵我是一个伟大的新手
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Signature</title>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes:light dark;
}
a {margin:0; padding:0; border:none; text-decoration:none;}
}
@media (prefers-color-scheme: dark) {
body: {
color:#ffffff}
}
</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" />
</head>
<body style="font-family:'Barlow','Arial','Tahoma','Trebuchet','Helvetica','sans-serif'">
<br/>
<table role="presentation" class="darkmode" style="max-width: 350px ; padding: 15px">
<tr style="border-collapse: collapse">
<td style="padding-right: 10px; padding-left: 0px ; padding-top: 0px ; padding-bottom: 0px ; margin:auto ; vertical-align:middle">
<a href="https://www.siteinternet.blabla">
<img
src="https://i.postimg.cc/XjqZ6KZp/logo-hp-1024.png"
alt="[LOGO]"
title="Allé sur le site internet"
width="50"
style="width:50px">
</a>
</td>
<td colspan="2" style="padding: 0px ; text-align: left ; line-height: 1.3 ; font-size: 10pt">
<b>Jean Dupont</b>
<br/>
Marketing
<br/>
<a
style="font-size: 9pt" title="Télécharger les coordonnées"
href="https://qrco.de/">> Télécharger la fiche contact</a>
</td>
</tr>
<tr style="border-collapse: collapse; padding: 0px">
<td colspan="3" style="height: 10px"></td>
</tr>
<tr style="height:20px ; padding: 0px ; border-collapse: collapse">
<td> </td>
<td style="vertical-align:middle ; text-align: center; padding:3px; padding-left: 0px">
<img
src="https://i.postimg.cc/gkWw93V6/mobile-RVB-2-PNG24.png"
alt="•"
title="Portable"
width="10"
style="width:10px">
</td>
<td valign="middle" style="font-size: 10pt">
<a title= "Téléphoner" href="tel:+33644444444">+33(0) 7 44 44 44 44</a>
</td>
</tr>
<tr style="height:20px ; padding: 0px; border-collapse: collapse">
<td> </td>
<td style="vertical-align:middle ; text-align: center ; padding:3px; padding-left: 0px">
<img data-imagetype="External" src="https://i.postimg.cc/G3P7CGr6/old-phone-max30px-RVB.png"
alt="•"
width="13"
style="width:13px"
title="Fixe">
</td>
<td valign="middle" style="font-size: 10pt">
<a title= "Téléphoner" href="tel:+33455555555">+33(0) 4 55 55 55 55</a>
</td>
</tr>
<tr style="height:20px ; padding: 0px ; border-collapse: collapse">
<td></td>
<td style="vertical-align:middle ; text-align: center ; padding:3px; padding-left: 0px">
<img
src="https://i.postimg.cc/Nf4z1TzR/mail-max30px-RVB.png"
alt="•"
title="Mail"
width="12"
style="width:12px">
</td>
<td valign="middle" style="font-size: 10pt">
<a title= "Envoyer un mail"
href="mailto:[email protected]">[email protected]</a>
</td>
</tr>
<tr style="height:20px ; padding: 0px ; border-collapse: collapse">
<td> </td>
<td style="vertical-align:middle ; text-align: center ; padding:3px; padding-left: 0px">
<img
src="https://i.postimg.cc/s2XdBKfB/globe-max30px-RVB.png"
alt="•"
title="Site internet"
width="13"
style="width:13px">
</td>
<td valign="middle" style="font-size: 10pt">
<a title= "Visiter le site internet" href="https://www.siteinternet.blabla">www.siteinternet.blabla</a>
</td>
</tr>
<tr style="padding: 0px ; border-collapse: collapse">
<td colspan="3" style="height: 10px"></td>
</tr>
<tr style="height : 16px; padding: 0px ; border-collapse: collapse">
<td> </td>
<td style="vertical-align:middle ; text-align: center ; margin:auto; padding:3px; padding-left: 0px">
<img
src="https://i.postimg.cc/MTQLRFCG/location-pin-max30px-RVB.png"
alt="•"
width="9.6"
style="width:9.6px"
title="Adresse"
>
</td>
<td valign="middle" style="text-align: left ; padding-bottom:0; font-size: 10pt">
<b>Compagnie</b>
</td>
</tr>
<tr style="padding: 0px ; border-collapse: collapse">
<td> </td>
<td> </td>
<td style="padding-top:0 ; line-height: 1.3; font-size: 9pt">
<b>Agence Malibu</b>
<br/>
Zone industriel
<br/>
110, rue des marguerites
<br/>
32000 Marlou-les-bains
</td>
</tr>
</table>
</body>
</html>这是 Apple 邮件的结果，签名上方有文字（深色模式下为黑色！）：
最新问题
- _mm_movemask_epi8 内在函数到底在做什么？
- 随着样本数量的增加，Pi 变得不准确
- 是否可以在Windows上用C++模拟目录/分区
- Terraform 模块 - 使用 PAT 添加 git 源（作为环境变量）
- 注册控制器中的错误非法参数：未定义，字符串
- git 在存储和合并后丢失了提交
- 更改列标题颜色
- 为什么 Chrome 网络安全阻止我的第一方 cookie？
- 由于php版本问题，无法使用composer建立laravel项目
- Spring Boot 服务调用另一个服务，如何使用 spring-boot-docker-compose
- 调用scrollController.animateTo时在ListView上滚动
- 从 UI checkboxGroupInput 切换点组，而不是 addLayersControl
- 在三个js中确定添加阴影所需的表面
- 如何展平嵌套的json
- 从命令行上传 jena-fuseki 数据集
- go kit中的中间件功能
- 如何在本地运行主宰模型
- Blender 脚本不起作用
- 是否可以从十六进制颜色得到RGB？
- 在 React Router 中重定向所有没有根文件夹的路径匹配
© www.soinside.com 2019 - 2024. All rights reserved.