更改不同块的背景颜色

Posted 2023-03-24

【中文标题】更改不同块的背景颜色

【英文标题】：Changing background colour of different blocks

【发布时间】：2021-05-13 16:39:10

【问题描述】：

我正在 Mailchimp 中创建一个基本的电子邮件模板，并希望将一个块的背景颜色更改为与其他块不同（这将是白色，其他块的背景将是蓝色。）

我正在考虑尝试使用 CSS 来做到这一点，因为在 Mailchimp 中不可能在正文中拥有多种背景颜色，这就是我作为不编码的人遇到的麻烦。

我想将块的背景颜色更改为白色，并想知道在下面列出的 html 代码中在哪里输入背景颜色。我也想知道我是否需要将此代码导出到记事本或其他东西，而不是从 mailchimp HTML 编辑器进行编辑。 代码：

<table align="left" border="0" cellpadding="0" cellspacing="0"  style="min-width:100%;" class="mcnBoxedTextContentContainer">
  <tbody><tr>
    <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;">
      <table border="0" cellspacing="0" class="mcnTextContentContainer"  style="min-width: 100% !important;background-color: #007E97;">
        <tbody><tr>
          <td valign="top" class="mcnTextContent" style="padding: 18px;color: #FFFFFF;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, Verdana, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: center;">
            <h1 dir="rtl" style="text-align: left;"><font face="helvetica neue, helvetica, arial, verdana, sans-serif">LOREM IPSUM</font></h1>
            <table align="center" bgcolor="#fefefe" border="0" cellpadding="0" cellspacing="0" style="background-color:#eaedef" >
            </table>

【参考方案1】：

表格的背景颜色在这里设置：

   <table border="0" cellspacing="0" class="mcnTextContentContainer"  style="min-width: 100% !important;background-color: #007E97;">

您可以看到字段背景颜色：#007E97，# 表示它是一个颜色代码，因此将其更改为 #FFFFFF 表示纯白色。

但是您可能还想更改文本颜色，否则您将在白色背景上显示白色文本，文本颜色可以在：

<td valign="top" class="mcnTextContent" style="padding: 18px;color: #FFFFFF;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, Verdana, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: center;">

这里有字段颜色：#FFFFFF，如果我们可以将其更改为 #000000（黑色）。

<table align="left" border="0" cellpadding="0" cellspacing="0"  style="min-width:100%;" class="mcnBoxedTextContentContainer">
  <tbody><tr>
    <td style="padding-top:9px; padding-left:18px; padding-bottom:9px; padding-right:18px;">
      <table border="0" cellspacing="0" class="mcnTextContentContainer"  style="min-width: 100% !important;background-color: #FFFFFF;">
        <tbody><tr>
          <td valign="top" class="mcnTextContent" style="padding: 18px;color: #000000;font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, Verdana, sans-serif;font-size: 14px;font-weight: normal;line-height: 150%;text-align: center;">
            <h1 dir="rtl" style="text-align: left;"><font face="helvetica neue, helvetica, arial, verdana, sans-serif">LOREM IPSUM</font></h1>
            <table align="center" bgcolor="#fefefe" border="0" cellpadding="0" cellspacing="0" style="background-color:#eaedef" >
            </table>

至于你应该如何导出我真的不知道，因为我没有使用过 Mailchimp，但你可能只需将代码复制到任何代码编辑器中，然后将文件命名为 index.html，在浏览器中打开它，什么时候您对此感到满意，将代码粘贴回 Mailchimp。