通過圖像通訊圖像

任何人都可以幫我解決我的問題嗎？我嘗試使用幾個表段來構建新聞郵件，因爲mailchimp在代碼方面存在問題，如果他不在表中，則會中斷我的郵件內容。對我來說主要問題是圖像超過圖像。請看看我的代碼。通過圖像通訊圖像

圖案是底部圖像，並有100％的大小（700x50px）和標誌是頂部圖像（32x32px）。徽標必須位於右側，圖案圖像上的margin-top -20px和margin-right 30px，但不使用「position」屬性（mailchimp中斷所有位置屬性）。

現在，我的標誌是在模式下。我試圖用z-index來解決這個問題，但是這裏沒有任何反應。

<table class="header_class"> 
<td> 
<img class="pattern_header"src="pattern.jpg" alt="pattern" /> 
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/> 
<h1>July 2017</h1> 
</td> 
</table>

我的CSS：

pattern_header{ 
max-width: 700px; 
} 

logo_small{ 

margin-right: 30px; 
margin-top: -20px; 
}

（我完全初學者，也許我的代碼是不正常）

頭應該是什麼樣子：

來源

2017-07-30 CoaBoy

該解決方案是否適合您？ – Syfer

爲了使電子郵件工作的背景，您可以使用職位（如你所發現的）。要使背景在Outlook中工作，您需要使用VML（矢量標記語言），這是Outlook（> 2007）的原生。所有其他的電子郵件客戶端應該能夠讀取td上的背景聲明。

很少有東西在下面的代碼要注意：

我已經加入[HEIGHT OF IMAGE]，你需要添加的高度爲VML。
您尚未提供您所需要的圖片尺寸。注意Outlook不會讀取圖像上的樣式屬性。

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
     <td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);"> 
 
     
 
     <!--[if gte mso 9]> 
 
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;"> 
 
     <v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" /> 
 
     <v:textbox inset="0,0,0,0"> 
 
     <![endif]--> 
 

 
    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
     
 
     <td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td> 
 
     </tr> 
 
    </table> 
 

 

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

讓我知道這對你的作品。

來源

2017-07-30 09:20:46 Syfer

現在，徽標在圖案圖像上，這就是我想要的，但是當我嘗試使用保證金屬性向下移動徽標時，我的背景也會向下移動。標誌必須是分開的對象。 – CoaBoy

在包含h1和徽標的td上使用填充（不包括邊距）。看到我上面的編輯。看我上面的例子。 – Syfer

我已經更新了我的代碼，您的要求是什麼。它現在應該工作。 – Syfer

這就是我需要的。徽標對齊不在頂部（從頂部20px和從右邊30px偏移）。模式對齊是頂部。

Example

來源

2017-07-30 15:24:55 CoaBoy

這是一個答案的地方。我建議你刪除它並將其作爲我的回答下的評論。人們可以快速投票或標記這樣的事情。 – Syfer

通過圖像通訊圖像

回答

相關問題