将背景向左移动 css

Question

这个 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>

Answer 1

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

有些不行：

不要将宽度设置为大于 280 像素（如果有内边距，则设置为更小）。手机不会对此做出响应。
线性渐变可以在某些平台上工作，但在其他平台上不行。对于这种甚至不是渐变的渐变，使用bgcolor属性或background-color样式。
您可能对 <body> 标签有疑问，因为它在不同的电子邮件客户端中被替换或使用得很奇怪。把你的作品放在 table.
不要使用 <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>

Answer 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>

将背景向左移动 css

Move background to the left css

html

css

html-email