Question

我正在为电子邮件创建简报，我为简报添加了背景图片，但背景图片没有显示电子邮件中的表格。我需要提供图像的在线路径。代码中有错误吗？请帮我。

这是我的代码：

<style type="text/css">
  .position{
    font-family:century gothic !important;
    font-size:20px;
    color:white;
    font-weight:bold;
    text-decoration:underline;
    line-height:1.2;
  }
  .location,.condition{
    font-family:century gothic !important;
    font-size:17px;
    color:white;
  }
  .apply_info{
    font-family:century gothic !important;
    font-size:20px;
    color:black !important;
  }
</style>
</head>
<body>
  <div class="container">
    <table  border="0" width="100%" background="http://i67.tinypic.com/i69xzq.jpg" class="tbl_wrapper" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%">
      <tr>
        <td>
          <table width="100%">
            <tr height="162px"></tr>
            <tr>
              <td colspan="2">
                <table width="100%">
                  <tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">NOW</td></tr>
                  <tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">HIRING</td></tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td>
          <table width="100%">
            <tr>
              <td style="text-align:right">
                <table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
                  <tr>
                    <td>JOIN THE TEAM</td>

                  </tr>
                </table>
              </td>
              <td width="200px" height="20px" bgcolor="red"></td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td>
          <table width="100%">
            <tr>
              <td width="200px" height="20px" bgcolor="red"></td>
              <td style="text-align:left">
                <table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic">
                  <tr>
                    <td>OPEN POSITIONS</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td colspan="4">
          <table width="100%">
            <tr>
              <td>
                <table width="100%">
                  <tr>
                    <td class="position" colspan="3">IT Support</td>
                  </tr>
                  <tr>
                    <td  class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">(Freshers can also apply)</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">OPS Executive</td>
                  </tr>
                  <tr>
                    <td class="location" colspan="3">Delhi & Jaipur</td>
                  </tr>
                  <tr >
                    <td class="condition" colspan="3">(Freshers can also apply)</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">Data Base Expert</td>
                  </tr>
                  <tr>	
                    <td class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">Experience 3-5 Years</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">Full Stack Developer</td>
                  </tr>
                  <tr>
                    <td class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">(Experienced from premier/reputed institute)</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">Experience 5-7 Years</td>
                  </tr>
                  <tr>
                    <td class="position" colspan="3">Sales Executives/Manager</td>
                  </tr>
                  <tr>
                    <td class="location" colspan="3">Delhi</td>
                  </tr>
                  <tr>
                    <td class="condition" colspan="3">Experience 3-5 Years</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr height="160px"></tr>

      <tr>
        <td>
          <table border="0" width="100%">
            <tr>
              <td>
                <table width="100%">
                  <tr>
                    <td width="400px" height="20px" bgcolor="red"></td>
                    <td style="text-align:center">
                      <table width="100%" style="font-size:30px;color:red;font-family:century gothic">
                        <tr>
                          <td>APPLY NOW</td>
                        </tr>
                      </table>
                    </td>
                    <td width="400px" height="20px" bgcolor="red"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

        </td>
      </tr>
      <tr>
        <td>
          <table width="100%">
            <tr><td class="apply_info">rashmi.bhattacharjee@axestrack.com</td></tr>
            <tr><td class="apply_info">44E/9 First Floor, Kishangarh, Vasant Kunj, New Delhi-110070</td></tr>
            <tr><td class="apply_info">Phone-8373902513</td></tr>
            <tr><td><img src="http://i67.tinypic.com/rmk8ev.jpg" class="img-responsive center-block" style="height:80px" /></td></tr>
          </table>
        </td>
      </tr>
    </table>
  </div>

Answer 1

您的图片链接错误，“http://i67.tinypic.com/rmk8ev.jpg”您的链接重定向到了tinypic。

相反，您应该抓取图片源链接，在您的情况下将是“http://oi67.tinypic.com/rmk8ev.jpg”

这不是一个好习惯，你应该在你的服务器上托管你自己的图像，因为tinpic可以删除它。

Answer 2

我实际上无法在CSS / HTML中看到背景图片，因此很难诊断出您的具体问题。

但是，在各种电子邮件客户端中呈现时，您将遇到背景图像问题。以下是Litmus撰写的关于该主题的综合文章：https://litmus.com/community/learning/25-understanding-background-images-in-email

正如文章中所提到的，“防弹背景图片”＆＃39; https://backgrounds.cm/上的工具非常有用，包括VML代码，可以在Outlook的问题版本中呈现背景图像。

Answer 3

在这里回答其他几个问题的尝试很少。

将图像参考路径更新为http://i67.tinypic.com/i69xzq.jpg
将背景图片的内联CSS向下移动几级到<td>。
使用background="http://i67.tinypic.com/i69xzq.jpg"（与您一样），或尝试`style =“background-image：http://i67.tinypic.com/i69xzq.jpg;”。避免使用CSS简写。

使用Backgrounds.cm生成Outlook的VML代码。

<body>
    <div class="container">
        <table  border="0" width="100%" class="tbl_wrapper">
            <tr>
                <td background="http://i67.tinypic.com/i69xzq.jpg" bgcolor="#ffffff" valign="top" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%"">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                    <v:fill type="tile" src="http://i67.tinypic.com/i69xzq.jpg" color="#ffffff" />
                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                    <![endif]-->
                    <div>
                        <table width="100%">
                            <tr height="162px"></tr>
                            <tr>
                                <!-- Email Content -->
                            </tr>
                        </table>
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
    </div>
</body>

这可以让您在电子邮件客户端中获得相当好的报道！

背景图片在html简报中不起作用

3 个答案: