E-mail: combiner un dégradé avec un fond pare-balles VML

Question

Je n'arrive pas à trouver le meilleur moyen d'ajouter un dégradé à mon image d'arrière-plan. Comme la plupart des concepteurs de messagerie l'ont constaté, Outlook est le seul client de messagerie qui me pose des problèmes.

Je ne peux pas ajouter ce dégradé à l'image dans photoshop. Cette image de fond sera dynamique en fonction de qui l'ouvre l'email.

J'ai essayé d'imbriquer l'arrière-plan et le dégradé, mais j'ai découvert à la dure que vous ne pouvez pas le faire. Alors maintenant je me demande si je peux avoir l'image de fond et le dégradé dans le même élément de remplissage VML.

Voici mon image de fond:

<!--[if gte mso 9]> 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px;height:407px; background-position: center center !important;"> 
    <v:fill type="tile" src="http://i.imgur.com/Z0d2QCI.jpg" 
    <v:textbox inset="0,0,0,0"> 
<![endif]--> 

pourrais-je ajouter un deuxième élément de remplissage à cela?

<v:fill type=gradient color="#ffffff" color2="#000000" opacity="0%" opacity2="100%" /> 

Ce dégradé doit être noir à transparent avec du noir sur le dessus et 0% transparent sur le fond. Je veux qu'il ressemble à ceci:

Answer 1

Je ne pense pas que l'ajout d'une deuxième image de remplissage ou de fond au même élément et de le faire fonctionner dans Outlook, mais vous pouvez essayer imbrication images de fond comme celui-ci:

<!-- First Background : BEGIN --> 
<table cellpadding="0" cellspacing="0" border="0" width="100%"> 
    <tr> 
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top"> 
     <!--[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="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" /> 
     <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> 
     <![endif]--> 
     <div> 

     <!-- Second Background : BEGIN --> 
     <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
      <tr> 
      <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top"> 
       <!--[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="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" /> 
       <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> 
       <![endif]--> 
       <div> 

       Content 

       </div> 
       <!--[if gte mso 9]> 
       </v:textbox> 
       </v:rect> 
       <![endif]--> 
      </td> 
      </tr> 
     </table> 
     <!-- Second Background : END --> 

     </div> 
     <!--[if gte mso 9]> 
     </v:textbox> 
     </v:rect> 
     <![endif]--> 
    </td> 
    </tr> 
</table> 
<!-- First Background : END -->