将背景移到左侧css答案

【问题标题】：Move background to the left css将背景移到左侧css
【发布时间】：2021-07-07 04:37:27
【问题描述】：

这个 HTML 在任何编辑器中都可以正常工作，但是当我根据这个 html 向 gmail 发送示例电子邮件时，背景会移到中心：

</head>
        <body style="padding: 0 25px;background: linear-gradient(to bottom, red 80px, black 0%) no-repeat top / auto;background-size: 900px 1020px;">
<header>

【问题讨论】：

你能拍一张整个屏幕的照片吗，因为我看不到剩下的东西。
任何电子邮件客户端都不支持线性渐变。使用图片。
也不要使用<header> 或类似的东西。像 1990 年一样使用 <tables>。最好使用像 mjml.io 或 get.foundation/emails.html 这样的框架，您可以通过谷歌搜索轻松找到任何其他框架。
欢迎来到 html 电子邮件的美妙世界（太糟糕了！）。还要在 Outlook 中进行测试，因为它也有一个糟糕的 html 渲染引擎。使用表格并从您知道有效的模板开始，Mailchimp 有一些和其他服务也可以。保持简单。
@TajKhan linear-gradient 实际上在相当多的电子邮件客户端中得到支持。正确处理很棘手，对于 Outlook，您必须提供 VML 后备。对于某些电子邮件客户端，它们只会显示一种颜色。

标签： html css html-email

【解决方案1】：

HTML 电子邮件是 1990 年代风格的网页设计，但具有移动支持和一些有限的渐进式设计机会。所以需要彻底重新设计。

一些禁忌：

不要将宽度设置为大于大约 280 像素（如果有内边距则更小）。手机不会对此做出响应。
Linear-gradient 可以在某些平台上工作，但不能在其他平台上工作。对于这种甚至不是渐变的渐变，请使用bgcolor 属性或background-color 样式。
<body> 标签可能存在问题，因为它在不同的电子邮件客户端中被替换或奇怪地使用。把你的工作放在桌子上。
不要使用<header> 和其他更现代的 HTML/CSS，除非您有不支持它的电子邮件客户端的后备方案。

你可以这样开始：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
</head>
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
    <!-- START OUTER WRAPPER -->
    <center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
            <!-- END OUTER WRAPPER -->          
                <!-- START SINGLE COLUMN v1 -->
                <tr>
                    <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
                        <table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
                            <!-- START TEXT -->
                            <tr>
                                <td bgcolor="red" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;height:80px;">
                                    <p style="margin:0;font-size:14px;margin-bottom:10px;">&nbsp;</p>
                                </td>
                            </tr>
                            <tr>
                                <td bgcolor="black" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;color:#fff">
                                    <p style="margin:0;font-size:16px;">This is another paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- END SINGLE COLUMN v1 -->
            <!-- START OUTER WRAPPER -->
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
    </center>
    <!-- END OUTER WRAPPER -->
</body>
</html>

【讨论】：

【解决方案2】：

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);">
  <tr>
    <td style="color:#ffffff;">In the table, you can give background. Make sure gradient background will not render in Outlook email browser. Instead of linear background, you can give image in the background. </td>
  </tr>
</table>

</body>

【讨论】：