Расположение изображения (lo go) на внешний вид фонового изображения - PullRequest
Новая
       51

Расположение изображения (lo go) на внешний вид фонового изображения

0 голосов
/ 09 июля 2020

Я хочу, чтобы изображение lo go (img) располагалось слева: 20 пикселей, сверху: 20 пикселей фонового изображения. И где мне установить position: relative; фонового изображения для Outlook? Прилагаю 2 изображения того, как он должен выглядеть и каков он сейчас. Мне нужно твое решение. Пожалуйста, ответьте рабочим кодом. Заранее благодарим за помощь.

Вот код: 

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#" class="hp">
   <tr>
      <td background="http://i.imgur.com/wxiLDBs.jpg" bgcolor="#33ffff" width="600" class="hp" height="373" style="background-repeat:no-repeat; background-size:cover; background-position:left top; background-image:url('http://i.imgur.com/wxiLDBs.jpg'); width:600px; height:373px; position:relative;" valign="top">
         <!--[if mso]>
         <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border:0; display:inline-block; width:450pt; height:279.75pt; position:absolute; behavior:url(#default#VML); top:0; left:0; z-index:1;" src="http://i.imgur.com/wxiLDBs.jpg"/>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border:0; display:inline-block; position:absolute; width:450pt; height:279.75pt; top:0; left:0; z-index:2;">
            <v:fill opacity="0%" color="#33ffff" style="z-index:1;"/>
            <v:textbox inset="0,0,0,0">
               <![endif]-->
               <div>
                  <table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="ep">
                     <tr>
                        <td valign="top">
                           <table width="100%" class="hp" cellspacing="0" cellpadding="0">
                              <tr>
                                 <th width="200" valign="top" style="font-size:0pt; line-height:0pt; margin:0; padding:0; font-weight:normal;" align="left" class="mob-column">
                                    <table border="0" cellspacing="0" cellpadding="0">
                                       <tr>
                                          <td style="font-size:0pt; line-height:0pt; text-align:left; padding:20px 0px 0px 0px;" class="condensed-p-t-logo">
                                             <!--[if mso]>
                                             <a href="http://www.website.com">
                                                <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://i.imgur.com/lgjIkWA.png" style="top:20px; left:20px; z-index:3; position:relative; width:86.25pt; height:28.5pt;"/>
                                             </a>
                                             <![endif]-->
                                             <!--[if !mso]>-->
                                             <a href="http://www.website.com">
                                             <img src="https://i.imgur.com/lgjIkWA.png" style="display:block; border:0px;" alt="Your logo"/>
                                             </a>
                                             <!--<![endif]-->
                                          </td>
                                       </tr>
                                    </table>
                                 </th>
                                 <th valign="top" style="font-size:0pt; line-height:0pt; margin:0; padding:0; font-weight:normal;" class="mob-column">
                                    <table border="0" cellspacing="0" cellpadding="0" class="hp" width="100%">
                                       <tr>
                                          <td valign="top" style="padding:30px 0px 0px 0px; text-align:right;" class="hide">
                                             <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;" class="fallback-text-r" target="_blank">
                                             <font face="'Roboto', Arial">Reservation</font>
                                             </a>
                                             <span style="color:#ffffff; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;">
                                             <font face="'Roboto', Arial">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</font>
                                             </span>
                                             <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;" class="fallback-text-r" target="_blank">
                                             <font face="'Roboto', Arial">Recipes</font>
                                             </a>
                                             <span style="color:#ffffff; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;">
                                             <font face="'Roboto', Arial">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</font>
                                             </span>
                                             <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;" class="fallback-text-r" target="_blank">
                                             <font face="'Roboto', Arial">Contact</font>
                                             </a>   
                                          </td>
                                          <!--[if !mso]>-->
                                          <td style="padding:25px 0px 0px 0px; text-align:left; display:none;" class="condensed-nav">
                                             <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:block;" class="mobile-column-fallback-text-r">
                                             <font face="'Roboto', Arial">|&nbsp;&nbsp;&nbsp;Reservation</font>
                                             </a>
                                             <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:block;" class="mobile-column-fallback-text-r">
                                             <font face="'Roboto', Arial">|&nbsp;&nbsp;&nbsp;Recipes</font>
                                             </a>
                                             <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:block;" class="mobile-column-fallback-text-r">
                                             <font face="'Roboto', Arial">|&nbsp;&nbsp;&nbsp;Contact</font>
                                             </a>
                                          </td>
                                          <!--<![endif]-->
                                       </tr>
                                    </table>
                                 </th>
                              </tr>
                           </table>
                        </td>
                     </tr>
                     <tr valign="top">
                        <td>
                           <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ep" align="center">
                              <tr>
                                 <td style="font-family:'Parisienne', Arial; font-size:26px; color:#9933ff; padding:50px 0px 0px 0px; text-align:center; line-height:39px;" class="fallback-text-p">
                                    <font face="'Parisienne', Arial">Prepare The Best Dishes</font>
                                 </td>
                              </tr>
                              <tr>
                                 <td style="font-family:'Montserrat', Arial; font-weight:900; font-size:32px; color:#ffffff; padding:10px 0px 0px 0px; text-align:center; text-transform:uppercase; line-height:48px;" class="fallback-text-m">
                                    <font face="'Montserrat', Arial">Food when you want it</font>
                                 </td>
                              </tr>
                              <tr>
                                 <td style="font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; color:#ffffff; padding:20px 0px 0px 0px; text-align:center; line-height:19.29px;" class="fallback-text-r">
                                    <font face="'Roboto', Arial">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
                                    impedit quo minus id quod maxime placeat facere.</font>
                                 </td>
                              </tr>
                              <tr>
                                 <td style="padding:28px 0px 35px 0px;">
                                    <table border="0" align="center" cellpadding="0" cellspacing="0">
                                       <tr>
                                          <!--[if !mso]>-->
                                          <td>
                                             <a href="http://www.website.com" style="padding:12px 18px 12px 18px; border:2px solid #9933ff; background:transparent; color:#9933ff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; line-height:19.29px; display:block;" class="fallback-text-r">
                                             <font face="'Roboto', Arial">Read More</font>
                                             </a>
                                          </td>
                                          <!--<![endif]-->
                                          <!--[if mso]>
                                          <td style="padding:12px 18px 12px 18px; border:2px solid #9933ff; background:transparent;">
                                             <a href="http://www.website.com" style="color:#9933ff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; line-height:19.29px; display:block;" class="fallback-text-r">
                                             <font face="'Roboto', Arial">Read More</font>
                                             </a>
                                          </td>
                                          <![endif]-->
                                       </tr>
                                    </table>
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                  </table>
               </div>
               <!--[if mso]>
            </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
   </tr>
</table>

What it is now in outlook 2007

Что я хочу

...