如何在电子邮件中制作线性渐变背景？答案

【问题标题】：How do I make linear-gradient background in email?如何在电子邮件中制作线性渐变背景？
【发布时间】：2021-06-05 00:24:38
【问题描述】：

我正在尝试构建基于https://www.muicss.com/docs/v1/example-layouts/html-email 的电子邮件模板。

除了他们提供的内容之外，我还希望有两种纯色背景：颜色 A 用于顶部固定高度（例如 200 像素），颜色 B 用于其余内容，以及表格（卡片）漂浮在两种颜色之间，类似于This。

我使用linear-background 尝试了不同的选项，但它根本不显示，渐变从卡片底部开始，或者当复制到 Gmail 网络客户端时卡片的颜色变得透明（即使在我内联样式之后）

这是我现在拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- NOTE: external links are for testing only -->
    <style>
        body {
            width: 100% !important;
            min-width: 100%;
            margin: 0;
            padding: 0;
            background-color: #FFF;
        }

        .mui-body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        color: #212121;
        font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
        font-weight: 400;
        font-size: 14px;
        line-height: 1.429;
        letter-spacing: 0.001em;
        background-color: #FFF;
        
    
        }


        .mui-container, .mui-container-fixed {
            max-width: 600px;
            display: block;
            margin: 0 auto;
            clear: both;
            text-align: left;
            padding-left: 15px;
            padding-right: 15px;
        }

        .mui-container-fixed {
            width: 600px;
        }

        .mui-panel {
            padding: 15px;
            border-radius: 0;
            background-color: #FFF;
            border-top: 1px solid #ededed;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            border-bottom: 2px solid #d4d4d4;
        }
    </style>
  </head>

  <body>

    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
                <center>
                    <!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
                    <div class="mui-container">
                        <table cellspacing="0" border="0" width="100%">
                            <tr>
                                <td class="mui-panel">
                                    <table id="content-wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <p>random</p>
                                                    <p>text</p>
                                                </td>
                                            </tr>
                                        
                                        </tbody>
                                    </table>
                                </td>
                            </tr>                       
                        </table>
                    </div>
                    <!--[if mso]></td></tr></table><![endif]-->
                </center>
            </td>
        </tr>
    </table>

</body>
</html>

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： html css email html-email

【解决方案1】：

如果电子邮件客户决定坐下来严格遵守 RFC...如果他们使用相同的 html css 解析引擎...

问题不在于“如何”，而在于大多数电子邮件客户端一致全面支持哪种类型的 html 和 css。您会发现大多数客户在解析您的电子邮件时只做自己的事情，而您最终可能会为同一封电子邮件从头开始编写许多模板。

为了节省您一些时间，请在 Google 上搜索 Foundation for Emails。请参阅下面的直接链接。

Foundation for Emails | Responsive Email Templates

Foundation for emails 是一个框架，可帮助您从已有的模板开发自己的自定义电子邮件模板。流畅且响应迅速，适用于任何设备。很干净。

在此过程中，您将了解哪些 CSS 和 HTML 标签可以使用，哪些不受支持。许多不支持.. 给您一个想法，电子邮件中的 html 布局是使用 <table></table> 而不是 <div></div> 创建的。您使用的 DOCTYPE 也不理想；想想 2000 年代初期。

您将编写的所有通用电子邮件的正确文档类型示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【讨论】：

是的，我希望有某种标准，所有客户都同意支持。 Tbh，在没有任何编码背景的情况下，我已经使用该模板数周了，所以这对我来说将是一项漫长的工作。但我想要的很简单，所以希望我能尽快找到解决方案。我会试试你的 doctype 并与它打成一片。谢谢

【解决方案2】：

电子邮件客户端不支持所有 css 属性。所以简而言之，最好将图像用于线性渐变。

【讨论】：