2015-09-03 103 views
1

我無法獲取Outlook HTML通訊中的背景圖片。我嘗試了防彈法,但它不能按照它應該的那樣工作!新聞通訊在Outlook中被破壞

請查看我的代碼,看看您是否有任何想法如何在Outlook中正確顯示3種不同的背景圖像。這是我目前(和它完美的作品隨處可見,但Outlook)中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title>E-mail newsletter</title> 
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">    
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport"> 
     <style type="text/css"> 

/* Reset */ 
body { margin: 0px; padding: 0px; background-color: #FFFFFF; } 

::selection { 
background: #ff2f2f; /* WebKit/Blink Browsers */ 
} 
::-moz-selection { 
background: #ff2f2f; /* Gecko Browsers */ 
} 

/* Responsive */ 
@media only screen and (max-width:600px) { 

/* Tables 
parameters: width, alignment, padding */ 

table[class=scale] { width: 100%!important; } 
table[class=scale-300] { width: 100%!important; height: 300px!important; } 
table[class=scale-90] { width: 90%!important; } 

/* Td */ 
td[class=hide] { display: none!important; height: 0px!important; } 
td[class=scale-left] { width: 100%!important; text-align: left!important;} 
td[class=scale-height] { height: 70px!important;} 
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; } 
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; } 
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; } 
td[class=scale-center] { width: 100%!important; text-align: center!important;} 
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; } 
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; } 
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; } 
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; } 
td[class=scale-right] { width: 100%!important; text-align: right!important;} 
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; } 
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; } 
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; } 

td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; } 
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; } 
td[class=reset] { height: 0px!important; } 
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; } 

img[class="reset"] { display: inline!important; } 
img[class="scale-80"] { width: 80%!important; } 

} 


    </style> 
</head> 
<body> 

<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 

    <tr> 
          <td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px; padding:50px 0px 20px 0;"> 
           Can't see the offer? Click <a href="http://webpage.com" style="color: rgb(219, 0, 19);">here</a>!        </td> 
         </tr>  
    <tr> 
     <td> 
      <table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url(&quot;http://s30.postimg.org/s36pgisoh/bg1.jpg&quot;);" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620"> 
       <tr> 
        <td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png"> 
         &nbsp;      </td> 
       </tr> 
       <tr> 
        <td align="center"> 
         <table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500"> 
          <tr> 
           <td height="50"> 
            &nbsp;         </td> 
          </tr> 

          <tr> 
           <td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: &quot;Proxima N W01 At Smbd&quot;,Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span> 
           </td> 
          </tr> 
          <tr> 
           <td height="40"> 
            &nbsp; </td> 
          </tr> 
          <tr> 
           <td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: &quot;Proxima N W01 At Smbd&quot;,Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW&nbsp;<img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a> 
           </td> 
          </tr> 
          <tr> 
           <td height="50"> 
            &nbsp;         </td> 
          </tr> 
         </table> 

        </td> 
       </tr> 
       <tr> 
        <td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png"> 
         &nbsp;      </td> 
         </td> 
          </tr> 
         </table></tr> 
      </table></body></html> 


                                   </body></html> 
+0

'背景圖像:網址(" http://s30.postimg.org/s36pgisoh/bg1.jpg "); 「'你需要使這些''"回到'」' – Sharky

+0

沒有遺憾,我已經試過這個:)它並不那麼容易。 – user5295320

+0

你可能想更新你的問題,然後包括你已經試過的東西。 – Sharky

回答

1

background-image不支持後市,對不起你。

看看這裏的CSS兼容性電子郵件客戶端:https://www.campaignmonitor.com/css/

在電子郵件中使用HTML和CSS這是非常非常困難的。 每個閱讀電子郵件的電子郵件客戶端都會有自己的HTML郵件處理規則,所以您將不得不設計最低公分母。

+2

爲了增加這個功能,我在大多數客戶端測試郵件的最佳工具是http://www.litmus.com – lharby

+1

http://premailer.dialect.ca/也是一個很好的發送前檢查。上次我必須做一個HTML電子郵件,我不得不把所有的CSS內聯,以使其始終如一地工作(即不使用類)。把它全部內聯解決了我遇到的大多數問題,除了這個例子中的'background-image'等不支持的功能。 – Lyall