提问人：ambersoljan 提问时间：7/28/2023 最后编辑：j08691ambersoljan 更新时间：7/31/2023 访问量：108
如何让白色背景在移动和gmail / outlook深色模式下保持白色 - 电子邮件HTML CSS
How to get a white background to remain white in mobile & gmail/outlook dark mode - Email HTML CSS
问：
我遇到了背景消失的问题 - 不是反转，只是完全透明。它发生在 gmail、outlook 的移动设备上，并且似乎也发生在桌面暗模式下的 outlook 上。
我尝试将颜色更改为背景图像，但没有成功 尝试制作整个移动版本的行，但没有成功
更新：下面的代码似乎已经修复了移动菜单栏，但没有修复Gmail或Outlook问题，并且页脚栏在移动设备上仍然反转
请参阅下面的电子邮件代码：
菜单标题栏：
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff; background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/Header%20Background.png); background-repeat: no-repeat; background-size: cover; border-bottom: 5px solid #06f; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 20px; padding-left: 20px; padding-right: 10px; padding-top: 20px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="66.66666666666667%">
<table border="0" cellpadding="20" cellspacing="0" class="image_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="left" class="alignment" style="line-height:10px"><a href="https://blackbull.com" style="outline:none" tabindex="-1"><img class="fullWidth" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/rebrand-BB_full-logo.png" style="height: auto; display: block; border: 0; max-width: 167px; width: 100%;" width="167"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="20%">
<table border="0" cellpadding="5" cellspacing="0" class="button_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://secure.blackbull.com/" style="height:28px;width:62px;v-text-anchor:middle;" arcsize="18%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#000000; font-family:sans-serif; font-size:15px"><![endif]--><a href="https://secure.blackbull.com/" style="text-decoration:none;display:inline-block;color:#000000;background-color:#ffffff;border-radius:5px;width:auto;border-top:0px solid transparent;font-weight:600;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:'Readex Pro','Arial';font-size:15px;text-align:center;mso-border-alt:none;word-break:keep-all;white-space: nowrap;"><span style="padding-left:10px;padding-right:10px;font-size:15px;display:inline-block;letter-spacing:normal;"><span style="word-break: break-word; line-height: 18px; white-space: nowrap">Login</span></span></a><!--[if mso]></center></v:textbox></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-3" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="20%">
<table border="0" cellpadding="5" cellspacing="0" class="button_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://secure.blackbull.com/dashboard/wallet/add-funds?lang=en" style="height:28px;width:57px;v-text-anchor:middle;" arcsize="18%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#000000; font-family:sans-serif; font-size:15px"><![endif]--><a href="https://secure.blackbull.com/dashboard/wallet/add-funds?lang=en" style="text-decoration:none;display:inline-block;color:#000000;background-color:#ffffff;border-radius:5px;width:auto;border-top:0px solid transparent;font-weight:600;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:'Readex Pro','Arial';font-size:15px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:10px;padding-right:10px;font-size:15px;display:inline-block;letter-spacing:normal;"><span style="word-break: break-word; line-height: 18px;white-space: nowrap;">Fund</span></span></a><!--[if mso]></center></v:textbox></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
更多问题请联系我们吧：
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-7 mobile_hide" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000; background-color: #1a58d3; background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/question%20section%20backdrop.png); background-repeat: no-repeat; background-size: cover; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 50px; padding-left: 45px; padding-right: 20px; padding-top: 50px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="41.666666666666664%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;direction:ltr;font-family:'Readex Pro','Arial';font-size:19px;font-weight:600;letter-spacing:0px;line-height:120%;text-align:left;mso-line-height-alt:22.8px;">
<p style="margin: 0;"><strong>Any questions?</strong><br>
<strong>Get in touch.</strong></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 5px; padding-top: 5px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="58.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad" style="vertical-align: middle; color: #000000; font-family: inherit; font-size: 14px; letter-spacing: 0px; padding-bottom: 35px; padding-left: 20px; padding-right: 20px; padding-top: 35px; text-align: right;">
<table align="right" cellpadding="0" cellspacing="0" class="alignment" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px;" class=""><a href="tel:+6495585142" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/call-us-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com/en/" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/live_chat-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com/en/" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/visit-web-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 10px;" class=""><a href="mailto:[email protected]?subject=" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/mail-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-8 desktop_hide" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; color: #000; background-color: #06f; background-size: auto; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 30px; padding-left: 45px; padding-right: 20px; padding-top: 30px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; mso-hide: all; max-height: 0; display: none; overflow: hidden;" width="100%">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;direction:ltr;font-family:'Readex Pro','Arial';font-size:19px;font-weight:600;letter-spacing:0px;line-height:120%;text-align:left;mso-line-height-alt:22.8px;">
<p style="margin: 0;">Any Questions?<br>
Get in touch.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-9 desktop_hide" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; color: #000; background-color: #000; background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/blackbackground.png); background-repeat: no-repeat; background-size: cover; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; background-color: #000000; padding-bottom: 30px; padding-left: 45px; padding-right: 20px; padding-top: 30px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden;" width="100%">
<tbody>
<tr>
<td class="pad" style="vertical-align: middle; color: #000000; font-family: inherit; font-size: 14px; font-weight: 400; padding-bottom: 35px; padding-left: 20px; padding-right: 20px; padding-top: 35px; text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="alignment" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px;" class=""><a href="+6495585142" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/call-us-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/live_chat-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/visit-web-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 10px;" class=""><a href="[email protected]" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/mail-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
答：
0赞
Nathan
7/31/2023
#1
Gmail 应用使用背景图片方法。也就是说，对于黑暗模式 - 但这不是你在说的。
最近有一个问题可能会影响一些用户，其中背景图像停止工作。这是Gmail网络邮件的一个错误，他们显然正在修复它。同时，使用属性背景将起作用，即 .有关详细信息，请参阅 https://freshinbox.com/blog/gmail-rolling-out-changes-that-strip-background-image-css/?r=email。background="https://path.to/image"
Outlook 深色模式不起作用，因为普通方法不支持背景图像。您必须使用 VML。但是，如果您使用 VML，则该部分中的 Windows Mail 上的图像（与 Outlook 略有不同，但基本相同）不会显示。（关于如何使Outlook中的背景图像正常工作，已经有很多答案。有非常复杂的方法可以使它适用于 Windows Mail，但我们不再打扰了，所以我不得不四处寻找它。如果你想让我对此进行扩展，请发表评论。
上一个：即使 name=“”
评论