Question

我使用MailChimp设法在我的响应式电子邮件中将PNG放在另一张图像的顶部。

＆＃13;

.bannerupdate{
            width:96px !important;
			height:96px !important;
            position:absolute;
   			top: 0px;
    		left: 0px
		}
        .containerdiv{
            position: relative;
        } 
}	@media only screen and (max-width: 640px){
		body[yahoo] .bannerupdate{
			width:96px !important;
			height:96px !important;
            position:absolute;
   			top: 0px;
    		left: 0px;
		}
}	@media only screen and (max-width: 640px){
		body[yahoo] .gallery-img{
			width:320px !important;
			height:auto !important;
        }
}	@media only screen and (max-width: 640px){
		body[yahoo] .containerdiv{
			width:320px !important;
			height:auto !important;
}

＆＃13;

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590" align="left" border="0" cellpadding="0" cellspacing="0">
								
								<tbody><tr>
									<td  align="center">
										<div class="containerdiv"><a href="" style=" border-style: none !important; border: 0 !important;" class="editable_img"><img class="gallery-img" editable="true" mc:edit="shopimg1" src="https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/8b1dde61-8cf2-4480-8cc0-8547957be270.png" style="display: block; width: 202px;" alt="section image" border="0" width="202"><img class="bannerupdate" editable="true" mc:edit="banner1" src="https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/6c49e243-afce-4ffa-a3d7-96a214e4a0b4.png"/></a>
                                                                                
                                        </div>
									</td>
								</tr>
							</tbody></table>

＆＃13;

尽管MailChimp上的图片很好并且反应灵敏，但Gmail和Hotmail似乎并不理解我的编码。横幅显示在图片下方，并居中。不在图片上。有没有办法让它们像在MailChimp上一样出现？

提前致谢。

Answer 1

我不确定您是否可以在gmail中使用绝对位置，但是，如果您要执行的操作是在电子邮件模板中添加背景here is the best way to do so。

Answer 2

我认为你可以这样做

http://jsfiddle.net/h7yuLst5/

制作div

<div class="img"></div>

div {
    height: 200px;
    width: 200px;
    background: url("https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/6c49e243-afce-4ffa-a3d7-96a214e4a0b4.png") no-repeat left top, url("https://gallery.mailchimp.com/2571dbc33397f4ace3a6774a8/images/8b1dde61-8cf2-4480-8cc0-8547957be270.png") no-repeat center center;
}

并设置背景。您可以根据尺寸和位置进行操作以使其具有响应性。

Gmail和Hotmail在将图像置于另一个图像之上的兼容性

2 个答案: