使用HTML在Gmail上将图像浮动到图像上 [英] Float image over image on Gmail using HTML

问题描述

将以下代码片段通过电子邮件发送到GMAIL：
 
 <   table     width   =  800    align   =  center   < span class =code-attribute> cellspacing   =  0    cellpadding   =  0    border   =  0    bgcolor   =     class   =  100p  >  
 
 <   div     style   =   position：relative;左：0;顶部：0; >  
 
 <  < span class =code-leadattribute> img     src   =  background.jpg    style   =  position：relative;顶部：0;左：0; display：block;  /  >  
 
 <   a     href   =  link.com >  
 <   img     src   =  mainimage。 jpg    style   =  position：absolute; margin-left：auto; margin-right：auto;左：0;右：0;顶部：0;底部：0;顶部：0;底部：0; display：block;    /  >  
 <   / a   >  
 
 <   / div  >  
 
但是当通过gmail显示时，它只是堆叠两个。

解决方案

图像mainimage有多个多余的样式定义。如果你做的是abssolute，边距是无关紧要的。如果你设置顶部然后底部子句从底部从


如果背景图片仅用于背景你可以将背景定义为不重复div的背景位置0,0（预定位置）

have the following snippet of code that goes through email into GMAIL:

<table width="800" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="" class="100p">

<div style="position: relative; left: 0; top: 0;">

<img src="background.jpg" style="position: relative; top: 0; left: 0; display:block;"/>

<a href="link.com">
<img src="mainimage.jpg" style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; bottom: 0; top: 0; bottom: 0; display:block;" />
</a>

</div>

But when shown through gmail, it simply stacks the two.

解决方案

image mainimage has multiple redundant style definition. If you make it abssolute, margins are irrelevant. If you set top then the bottom clause takes it down to 0 distance from bottom from left and right will work same way. You do not need to define display:block because image is already block element.

if background image isonly for backgroun yo can define background as not repeating background of div at position 0,0 (which is predefined position)

这篇关于使用HTML在Gmail上将图像浮动到图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！