이메일 : 방탄 배경과 그라데이션 결합 VML

Question

내 배경 이미지에 그라디언트를 추가하는 가장 좋은 방법을 찾는 데 어려움이 있습니다. 대부분의 이메일 디자이너가 발견했듯이 Outlook은 나에게 문제가되는 유일한 이메일 클라이언트입니다.

이 그라디언트를 Photoshop의 이미지에 추가 할 수 없습니다. 이 배경 이미지는 이메일을 누가 열어 놓았는지에 따라 동적입니다.

배경과 그라디언트를 중첩시켜 보았지만 할 수없는 어려운 방법을 발견했습니다. 그래서 지금 같은 VML 채우기 요소에서 배경 이미지와 그라디언트를 가질 수 있는지 궁금합니다.

<!--[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]--> 

나는이에 두 번째 채우기 요소를 추가 할 수 있을까 : 여기

내 배경 이미지입니다?

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

이 그라디언트는 검은 색으로 투명해야하며 위쪽에는 검은 색, 아래쪽에는 0 % 투명합니다. 나는 그것을 같이 할 :

Answer 1

내가 같은 요소에 두 번째 채우기 또는 배경 이미지를 추가 생각하지 않는다 그것은 Outlook에서 일을했다,하지만 당신은 이 같은 배경 이미지를 중첩 시도 할 수 있습니다 :

<!-- 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 -->