2011-01-14 24 views
11

Sto creando un modello di email che deve visualizzare le immagini da un sito esterno. Ho inserito alcuni tag <img> per il rendering delle immagini e ci sono alcuni tag <td> con la proprietà background-image impostata in css in linea degli elementi.email HTML con stile immagine di sfondo non mostrato

Ora, quando un messaggio di posta elettronica viene ricevuto in Outlook, le immagini non vengono visualizzate (questo è previsto in quanto le immagini non sono incorporate). E faccio clic sulle immagini di download per vedere correttamente le immagini. Le immagini nel tag <IMG> vengono visualizzate e l'immagine di sfondo per lo <TD> non viene visualizzata.

Qualche opinione su come risolvere questo problema?

Grazie!

+0

esattamente come si fa a impostare la proprietà immagine di sfondo? – amosrivera

+0

td style = "background-image: url (http: //mysite/images/common/msg_collapsed_title_bg.png); background-repeat: repeat-x" – Chaitanya

risposta

7

Finalmente ho trovato la risposta.

Outlook 2007 non utilizza il motore di rendering di Internet Explorer per il caricamento di contenuto HTML. Invece utilizza le funzionalità HTML e CSS di Word 2007.

A causa di questo, gli attributi CSS come l'immagine di sfondo non sono supportati. Pertanto, non è possibile impostare un'immagine di sfondo per gli elementi HTML in Outlook utilizzando i tag CSS standard.

Maggiori informazioni sono disponibili all'indirizzo http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx

4

Le immagini di sfondo non sono supportati in Outlook. Come best practice, non utilizzare mai le immagini di sfondo nelle e-mail HTML. Se è necessario disporre di uno sfondo, è possibile utilizzare e un'immagine PLUS di un colore solido. Quelli con client di posta elettronica che supportano le immagini di sfondo otterranno le immagini e quelli che non la supportano torneranno al colore solido.

4

In realtà esiste un metodo per utilizzare le immagini di sfondo in e-mail HTML in Outlook.

Come Chaitanya afferma che non può essere fatto con i CSS, ma può essere fatto tramite VML.

La tecnica è un po 'più complicata dell'uso di background: url(....) e non la uso tanto frequentemente quanto vorrei usare la tecnica CSS (se funzionava in Outlook). Ma è molto utile.

L'ho usato con successo su un certo numero di campagne.

Istruzioni complete qui: include un elenco di client di posta elettronica che supportano questa tecnica.

http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

0

C'è un modo di visualizzazione delle immagini HTML.

E-mail html destra visualizzate come documento MSWord in Outlook.

Ho ottenuto la soluzione da questo post https://stackoverflow.com/a/12693917/413032.

Quindi abbiamo bisogno di un altro.

Infatti, è possibile aprire l'e-mail html in MSWORD e trovare ciò che sembra errato e considerare ciò che può essere un alternativa dà un'idea.

Ecco cosa ho fatto;

  1. Aggiunto v spazio dei nomi di tag HTML

    < html xmlns:v="urn:schemas-microsoft-com:vml" 
    
  2. stile aggiunto v s' al blocco testina

    <head> 
    <style type="”text/css”"> 
         v\:* { behavior: url(#default#VML); display:inline-block} 
    </style> 
    
  3. Nel tavolo o in cui è necessario aggiungere l'alternano MSWord

    <table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960"> 
          <!--[if gte vml 1]> 
            <v:shape 
             stroked='f' 
             style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;  
               z-index:-503306481; 
               visibility:visible; 
               width:720pt; 
               height:475pt;   
               top:0; 
               left:0; 
               border:0;            
               '> 
             <v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/> 
            </v:shape> 
          <![endif]--> 
           <tbody> .... 
    

Questo è tutto. Sicuro che sarà un rendering MSWord. E ancora, come notate, utilizziamo il posizionamento assoluto ...

In ogni caso, questa è una soluzione e risolve il problema in un certo senso. Speriamo che un giorno MS-Outlook esegua il rendering di e-mail html con un browser Web non con MS-Word.

0

Questo funziona in Gmail,

ho provato questo per mostrare div con immagine di newsletter via email, provare inline css, l'invio di e-mail le linee guida here