在邮件中添加的Css内容（图片）Html文件不显示图像

我有一些邮件在Css邮件的div类。但是，当我在Outlook或Gmail中打开邮件时，我无法查看图像。但是，当我在浏览器中打开邮件它显示出细腻的图像...在邮件中添加的Css内容（图片）Html文件不显示图像

附带的电子邮件的内容

<!--CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dt--><!--CTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<head> 

    <style type="text/css"> 
.logo_print { 
    background-image:url("http://www.websitename.com//en-ca/images/logo_print.jpg"); 
    width:105px;height:79px; } .icon_shipped { 
    background:url("http://www.websitename.com//en-ca/images/icon_shipped.jpg");widt 
    h:14px;height:14px; } .icon_not_shipped { 
    background:url("http://www.websitename.com//en-ca/images/icon_not_shipped.jpg"); 
    width:16px;height:15px; } .the_email_top 
    {width:560px;height:93px;background-image:url("http://www.websitename.com//en-ca 
    /images/top.jpg")} 
    </style> 

    <title></title> 
</head> 

<body> 
    <table border="0" cellspacing="0" cellpadding="0" align="center"> 
     <tbody> 
      <tr valign="top"> 
       <td colspan="3"> 
        <div class="the_email_top"> 
       </td> 
      </tr> 

      <tr valign="top"> 
       <td width="10">&nbsp;</td> 

       <td width="540"> 
        <div style="width: 10px; height: 12px; overflow: hidden;"></div> 

        <h1 style="margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #212121; font-weight: bold;">Password Reset</h1> 

        <div style="width: 10px; height: 16px; overflow: hidden;"></div> 

        <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Dear Customer,</span></p> 

        <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">To reset your password, either click the link below or copy and paste it into your browser.</span><br> 
        <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br> 
        <a href="http://www.websitename.com/en-ca/useraccount/resetPassword?NirvanaToken=01d4lKN1%2BTS5g94oEHejeR3IBovtHrwHnU6sfmjSCu5LMpnSjN5c6xX5s8rrOQ0p%0D%0A">Use this link.</a><br> 
        <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br> 
        <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Please do not reply to this email.</span></p> 

        <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Sincerely,</span></p> 

        <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Your Web Site Hosting support team</span></p> 

        <div style="width: 10px; height: 60px; overflow: hidden;"></div> 
       </td> 

       <td width="10">&nbsp;</td> 
      </tr> 

      <tr valign="top"> 
       <td colspan="3" bgcolor="#F2F2F2"> 
        <div style="width: 10px; height: 10px; overflow: hidden;"></div><span style="margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999999;">&copy; 2011 Deluxe Enterprise Operations. All Rights Reserved.</span> 

        <div style="width: 10px; height: 55px; overflow: hidden;"></div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

来源

2011-03-01 Aravind

尝试把图像内联“风格”的标签，看看是否可行。 – RDL 2011-03-01 16:02:56

大多数电子邮件程序会默认屏蔽图片 - 你可能会看到“请点击当您在实际客户端测试您的电子邮件时（这是为了防止跟踪，我猜 - 不太确定为什么这么常见），在这里启用来自XXX域的图像“消息。然而，浏览器没有这样的问题，所以你的图像会显示得很好。

如果你想让你的图片在电子邮件客户端中显示出来，你只需要希望你的用户允许他们。也许他们会，但不要指望它 - 你应该建立你的电子邮件，以便它看起来很好，即使没有图像。

希望这有助于（对于非答案抱歉，但这只是电子邮件客户端的方式）！

来源

2011-03-01 05:30:33

Xavier它没有显示图像或下载图像 – Aravind 2011-03-01 05:40:02

@Aravind这很奇怪。这里有几个想到的事情：你的CSS应该是内联的，而不是从你的服务器链接。如果您使用的是''标签，那么电子邮件客户端可能只会要求显示图片 - 如果您仅使用CSS'background-image：'属性，则有可能完全忽略它。 – 2011-03-01 05:46:35

除了Xavier消息，您需要使用绝对URL（完整路径）。即：

http://www.example.com/[image].[ext]

如果只是用/[image].[ext]它不会在电子邮件客户端工作，只用[image].[ext]，除非它嵌入在电子邮件本身将无法正常工作。

我不建议将图像嵌入到电子邮件中，因为它使人们需要下载更大的电子邮件并占用更多空间。

这里是一个handy guide to css support in emails

其为B/C程序您正在使用，以查看电子邮件不支持CSS背景图像。

来源

2011-03-01 05:45:05 RDL

我正在发送邮件中图像的完整路径（如您所述）。它只是一个邮件（CSS）中的div类，它具有图像 – Aravind 2011-03-01 06:53:00

@Aravind的路径，您不会在上面的标记中的任何位置调用您的css类。 – RDL 2011-03-01 15:07:28

@aravind，这里是不同的电子邮件程序支持的图表http://www.campaignmonitor.com/css/它可能是B/C您正在使用的程序不支持背景图像。 – RDL 2011-03-02 19:12:05

请原谅我，如果我有这个错误，但我一直以来的印象是，电子邮件客户倾向于删除出现在身体标签外的所有内容。

您没有body标签，而且，即使您做了，您的CSS也会出现在您的head标签中。这在身体标签之外。

我会添加一个body标签。然后我会把CSS放在body标签中。

很抱歉，如果我有错误的观念在这里，也许事情最近更改

来源

2011-03-01 07:45:20 stephenmurdoch

在邮件中添加的Css内容（图片）Html文件不显示图像

回答

相关问题