Warna latar belakang Gmail tidak berfungsi dengan betul dalam mel HTML

Question

Ogos 2023 - Adakah sesiapa mempunyai contoh mudah untuk mencipta warna latar belakang dengan keseluruhan badan mesej yang berfungsi dalam Gmail? Saya telah mencari di mana-mana dan setakat Ogos 2023, tiada satu pun contoh kod berfungsi dalam Gmail. Semoga seseorang boleh berkongsi coretan kecil daripada hingga Saya akan sentiasa bersyukur.

Saya telah mencuba banyak pilihan dan sama sekali tidak ada yang berhasil.

Answer 1

Semoga ini membantu:

<!-- width: calc((480px - 100%) * 480); -->
<table cellpadding="0" cellspacing="0" style="margin:auto; max-width:600px; width: 100%; font-size: 0; border-collapse: collapse;">
    <tr>
        <td>
            <h1 style="margin: 0; padding: 0; font-size: 30px; text-align:center; background: #e1c18b; color: #643c33; line-height: 2;">与我自拍</h1>
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://image.freepik.com/free-photo/camera-mirror_446-19322773.jpg" style="max-width: 100%; display: inline-block; vertical-align:top;" alt="Hero Image" />
        </td>
    </tr>
    <tr>
        <td style="background: #322421;">
            <table cellpadding="10" cellspacing="0" style="width: calc((480px - 100%) * 480); min-width: 50%; max-width: 100%;  font-family: arial; font-size: 14px; display: inline-block;">
                <tr>
                    <td>
                        <img src="https://image.freepik.com/free-photo/young-hipster-woman-making-photos-with-vintage-film-camera-at-summer-field-women-lifestyle-concept_1150-1054.jpg" alt="" style="width: 100%; display: inline-block; vertical-align: top;" />
                        <p style="padding: 10px 0; margin: 0; text-align: justify; color: #f6e2c0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium ipsa vero consequuntur sunt porro vitae, a sed fuga debitis ratione, quas mollitia voluptate, ad voluptatum repellat voluptates! At, doloribus.</p>
                    </td>
                </tr>
            </table>
            <table cellpadding="10" cellspacing="0" style="width: calc((480px - 100%) * 480); min-width: 50%; max-width: 100%;  font-family: arial; font-size: 14px; display: inline-block;">
                <tr>
                    <td>
                        <img src="https://image.freepik.com/free-photo/young-hipster-woman-making-photos-with-vintage-film-camera-at-summer-field-women-lifestyle-concept_1150-1054.jpg" alt="" style="width: 100%; display: inline-block; vertical-align: top;">
                        <p style="padding: 10px 0; margin: 0; text-align: justify; color: #f6e2c0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium ipsa vero consequuntur sunt porro vitae, a sed fuga debitis ratione, quas mollitia voluptate, ad voluptatum repellat voluptates! At, doloribus.</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="margin: 0; padding: 10px; font-size: 20px; text-align:center; background: #564037; color: #ffffff;">
            成为自拍专家
        </td>
    </tr>
</table>