在郵件中添加的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文件不顯示圖像

回答

相關問題