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

Question

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

.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;
}

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

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

提前谢谢。

Answer 1

我不确定是否可以在gmail中使用绝对位置，但是，如果您要做的是在电子邮件模板中添加背景，这是最好的方法。

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;
}

并为其设置背景。由您来调整尺寸和位置以使其响应迅速。