我知道在 gmail ios 中以暗模式为目标是不可能的。但我想我会问是否有人解决了这个问题：我的背景图像很暗。在黑暗模式下，白色文本恢复为黑色，而在 gmail for ios 上，我尝试过的都没有用。我什至尝试在图像顶部放置纯色背景色，但没有成功。如果有人找到了可行的破解方法、解决方法、想法，我很想听听！谢谢！！！
问问题
1078 次
2 回答
1
根据 Litmus的说法，Gmail iOS 应用程序应用了“完全反转”，这意味着他们甚至不会尝试解析您拥有的内容，而是应用某种全面过滤器来反转所有颜色。
因此，不幸的是，什么都行不通。
于 2021-03-29T22:50:41.910 回答
1
根据@Nathan 的要求...
您可以尝试的一种替代方法是从图像中删除任何深色的纯色，而是将它们设置在内联 CSS 中。所以说你有一张图片，但是你的文字在图片上，背景是纯色。从图像中取出该平面颜色，而不是制作透明的 PNG 并在包装单元格上设置深色，然后电子邮件客户端将根据文本分析背景颜色，然后文本将呈现比背景颜色更亮的颜色。
最初我的客户有一个多层设计，最初我在一张大的背景图像中使用木炭和白块。众所周知，在测试中，Gmail 很困难。所以我把木炭拿出来，让那个块透明，然后我在整个块上添加了木炭颜色作为背景颜色，然后你得到上面的结果，即使是 Gmail 粗略的暗模式优化。
这是改编后的 CSS 背景声明：
style="background:#1A1A1A url('https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png') no-repeat top center;
#1A1A1A 是原始背景图像中的木炭色。这现在是一个 CSS 属性 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" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head>
<base target="_blank">
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="x-ua-compatible">
<!--<![endif]-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse:collapse !important;
mso-table-lspace:0pt!important;
mso-table-rspace:0pt!important;
}
h1,h2,h3,h4,h5,h6,p,a,span,td,strong,li {
font-family:Arial,Helvetica,Verdana,sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 800;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style type="text/css">
html, body { background-color:#ffffff; }
.ReadMsgBody { width:100%; }
.ExternalClass { width:100%; }
* { -webkit-text-size-adjust:none; }
a:link, a:visited { color:#193152; }
.whiteLinks a:link, .whiteLinks a:visited { color:#ffffff!important; }
table, table td {border-collapse:collapse;}
a[href^=tel]{ color:inherit; text-decoration:none; }
@media screen and (max-width: 480px) {
u ~ div { min-width: 100vw !important; }
}
.button, .button2 { transition:0.2s all linear; }
.button:hover { color:#1a1a1a!important; background:#ffffff!important; border-color:#ffffff!important; }
.button2:hover { color:#ffffff!important; background:#1a1a1a!important; border-color:#1a1a1a!important; }
@media only screen and (max-width:600px) {
#footerContainer {
min-width: 100% !important;
width: 100% !important;
}
.responsive .column {
display: block !important;
width: 100% !important;
}
.responsive .columnImage {
height: auto !important;
max-width: 100% !important;
}
#footerContainer .ql-container {
padding-left: 20px !important;
padding-right: 20px !important;
text-align: center !important;
}
.deviceWidth { width:100%!important; padding:0; min-width:100%!important; }
.deviceWidthPadding { width:85%!important; padding:0; min-width:85%!important; }
.background { height:1020px!important; }
}
@media only screen and (max-width:460px) {
.logo { width:180px!important; }
.title { font-size:24px!important; line-height:1.2!important; }
.hero-text-padding { padding:55px 0 0 0!important; }
.background { height:990px!important; }
}
@media only screen and (max-width:360px) {
.title { font-size:22px!important; }
.profile-wrap { width:95px!important; }
.profile { width:80px!important; }
}
</style>
<!--<style type="text/css">
@media (prefers-color-scheme: dark) {
.go-light { color:#ffffff!important; }
.go-dark { color:#1a1a1a!important; }
.go-dark-bg { background-image:none!important; background:none!important; background:#2A2C2E!important; }
}
</style>-->
<title>XXXXXXX</title>
</head>
<body bgcolor="#ffffff" style="margin:0; padding:0;">
<table border="0" cellpadding="0" cellspacing="0" id="top" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="width:600px;">
<tr>
<td class="background go-dark-bg" width="600" height="1070" valign="top" style="background:#1A1A1A url('https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png') no-repeat top center; width:600px; height:1070px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1150px;">
<v:fill type="tile" src="https://sendlanehtml.sendlane.com/images/email/Thh8Gtjf88.png" color="#1A1A1A" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" class="deviceWidthPadding" style="width:480px;">
<tr>
<td class="hero-text-padding go-light go-dark-bg" style="font-family:'Raleway', Helvetica, Arial, sans-serif;font-size:11px;line-height:16px;color:#fffffe;font-weight:600;text-align:center; letter-spacing:2px; padding:55px 20px 0 20px; background-color:#1a1a1a;">
FROM THE BLOG
<p class="title go-light" style="margin:10px 0; font-size:29px; line-height:35px; font-weight:800; letter-spacing:0;"><a href="https://www.sendlane.com/blog-posts/essential-segments-for-your-ecommerce-holiday-marketing?utm_medium=email&utm_source=friday-newsletter&utm_campaign=blog" style="text-decoration:none; color:#fffffe;">7 Essential Segments for Your eCommerce Holiday Marketing in 2020</a></p>
</td>
</tr>
<tr>
<td align="center" class="go-dark-bg" style="padding:20px 0 35px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate !important;">
<tr>
<td align="center">
<!--[if gte mso 9]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#ff2988" style="padding:5px 15px;" valign="top">
<![endif]-->
<a class="button go-dark" href="https://www.sendlane.com/blog-posts/essential-segments-for-your-ecommerce-holiday-marketing?utm_medium=email&utm_source=friday-newsletter&utm_campaign=blog" target="_blank" style="background-color:#ff2988;border-collapse:separate !important;border-top:15px solid #ff2988;border-right:25px solid #ff2988;border-bottom:15px solid #ff2988;border-left:25px solid #ff2988;color:#fffffe;display:inline-block;font-family:'Raleway', Helvetica, Arial, sans-serif;font-size:14px;line-height:19px;text-align:center;font-weight:700;text-decoration:none; border-radius:8px;">Start Segmenting</a>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><a href="https://www.sendlane.com/blog-posts/essential-segments-for-your-ecommerce-holiday-marketing?utm_medium=email&utm_source=friday-newsletter&utm_campaign=blog"><img src="https://sendlanehtml.sendlane.com/images/email/KKZVa1Hmz0.png" width="480" style="display:block; width:480px; max-width:100%;" border="0" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Gmail iOS 应用程序的试金石：
在这里，您可以看到 Gmail 采用我们在 HTML/CSS 中定义的内容，并对如何进行暗模式优化做出更好的判断。
于 2021-04-01T11:57:57.067 回答