html - 带按钮的背景图片

Question

我正在寻找 td 背景的帮助，此 HTML 用于电子邮件。

我想设置图片背景，然后在背景图片的特定位置上方应用一个按钮。任何指导将不胜感激!

这是TD:

<table data-module="module-6" data-thumb="images/section3.png" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td data-bgcolor="bg-module" bgcolor="#eaeced">
      <table class="flexible" width="580" align="center" style="margin:0 auto;" cellpadding="0" cellspacing="0">
        <tr>
          <td data-bgcolor="bg-block" class="holder" style="padding:10px 30px 20px;" bgcolor="#ffffff">
            <table width="100%" cellpadding="0" cellspacing="0">

              <tr>
                <td align="center">
                  <table cellspacing="0" cellpadding="0" width="170">
                    <tr>
                      <td data-bgcolor="bg-button" data-size="size button" data-min="10" data- max="20" class="btn" align="center" style="font:bold 16px/18px Arial, Helvetica, sans-serif; color:#f9f9f9; text-transform:uppercase; mso-padding- alt:12px 20px; border-radius:0px;"
                        bgcolor="#e1e000">
                        <a target="_blank" style="text-decoration:none; color:#231f20; display:block; padding:12px 18px;" href="#">Play now</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td height="0"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

在 style=""中添加 background=""和背景属性确保其下方的表格中没有 bgcolor，否则它们将覆盖 bgimg。

附上代码。

<table data-module="module-6" data-thumb="images/section3.png" width="100%" 

cellpadding="0" cellspacing="0" background="http://imageLink.jpg" bgcolor="#006554" width="640" align="center" valign="top" style="background-position:right top !important; background-size:cover !important;">
  <tr>
    <td data-bgcolor="bg-module" bgcolor="">




 <table class="flexible" width="580" align="center" style="margin:0 auto;" cellpadding="0" cellspacing="0">
        <tr>
          <td data-bgcolor="bg-block" class="holder" style="padding:10px 30px 20px;" bgcolor="">

            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td align="center">
                  <table cellspacing="0" cellpadding="0" width="170">
                    <tr>
                      <td data-bgcolor="bg-button" data-size="size button" data-min="10" data- max="20" class="btn" align="center" style="font:bold 16px/18px Arial, Helvetica, sans-serif; color:#f9f9f9; text-transform:uppercase; mso-padding- alt:12px 20px; border-radius:0px;"
                        bgcolor="#e1e000">
                        <a target="_blank" style="text-decoration:none; color:#231f20; display:block; padding:12px 18px;" href="#">Play now</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td height="0"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>