5 html css email macos html-email
我已经用 HTML 创建了一个电子邮件签名,并将其与 Mac 和 iPhone 上的本机 Apple Mail 应用程序一起使用。
\n我也在使用深色模式,但遗憾的是,如果我使用我的签名,我的电子邮件背景会变成白色。我测试了它,这是因为我在签名中包含了图像。
有什么办法可以阻止 Apple Mail 显示白色背景吗?我希望背景是黑色的(就像纯文本电子邮件一样)。Apple Mail 设置中的“对邮件使用深色背景”选项已激活,并且在我的 HTML 代码中我没有定义背景颜色\xe2\x80\xa6
\n我使用的是macOS Catalina 10.15.7并拥有Apple Mail 版本 13.4。
\n这是我签名的HTML 代码(当然,我在此处发布时没有包含我的真实联系信息)。一切正常,只是背景是白色的。
<body><br /><br /><br />\n<style type="text/css">\n :root {Color-scheme: light dark; supported-color-schemes:light dark;}\n a {margin:0; padding:0; border:none; text-decoration:none;}\n table, tr, td, a, span {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px;}\n img {border-radius: 50%;}\n</style>\n<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />\n<meta name="format-detection" content="telephone=no" />\n<meta name="format-detection" content="address=no" />\n<meta name="format-detection" content="email=no" />\n<meta name="color-scheme" content="light dark" />\n<meta name="supported-color-schemes" content="light dark" />\n\n<table width="320" cellspacing="0" cellpadding="0" border-spacing="0" style="width:85px; margin:0; padding:0;">\n <tr>\n <td valign="top" width="80" style="width:80px; margin:0; padding:0; vertical-align:top;">\n <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%;">\n </td>\n <td width="10" style="width:10px; min-width:10px; max-width:10px; margin:0; padding:0;">\n \n </td>\n <td style="margin:0; padding:0;">\n <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;">\n <tr style="margin:0; padding:0;">\n <td style="margin:0; padding:0; font-family:\'Helvetica Neue\',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">\n <b><span style="color:#0099cc;">MY NAME</span></b>\n </td>\n </tr>\n <tr style="margin:0; padding:0;">\n <td style="margin:0; padding:0; font-family:\'Helvetica Neue\',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">\n <a href="mailto:MY EMAIL ADDRESS" style="border:none; text-decoration:none; color:#b0b0b0;"><span style="color:#b0b0b0">MY EMAIL ADDRESS</span></a>\n </td>\n </tr>\n <tr style="margin:0; padding:0;">\n <td style="margin:0; padding:0; font-family:\'Helvetica Neue\',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">\n <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>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n</table><br />\n \n</body>\nRun Code Online (Sandbox Code Playgroud)\n这是电子邮件签名的屏幕截图(出于隐私原因,黑框)。当我发送电子邮件或将其保存为草稿时,电子邮件的背景会变成白色。如果我稍后编辑草稿,背景将保持白色。\n
谢谢您的回答!
\nApple Mail 将允许深色模式,除非您有图像,在这种情况下,您需要仔细设置它以保留深色模式功能。如果您没有正确设置,它将关闭深色模式 - 因此会出现白色背景。
看起来您的<meta>部件设置没问题:但是,您可以尝试将其<head>放在<body>.
但看起来您缺少您想要的背景颜色。
因此,在 body: 上放置一个类<body class="darkmode">,并向该类添加一些样式:
@media (prefers-color-scheme: dark) {
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
}
Run Code Online (Sandbox Code Playgroud)