在html表格中覆盖图像

我正在创建一个电子邮件模板并使用表格来定位内容。我想重叠另一个图像，但我不能这样做。我在一行中使用以下内容，但似乎不起作用。如果有人能帮助我，我会很感激。在html表格中覆盖图像

<td colspan="3" style="padding: 14px; background-color: rgb(241, 241, 241); font-size: 11px; font-family: arial,helvetica; color: rgb(69, 85, 95); 
.under{ 
position:absolute; 
left:80px; 
top:0px; 
z-index:-1; 
} 
.over 
{ 
position:absolute; 
left:50px; 
z-index:1; 
}">

来源

2011-08-06 iman453

里面写入你有几个问题：

你不能把类的style属性。
显然，你试图绝对定位你的图像，但他们的父母有position: static（默认），所以他们将被定位为（可能）身体而不是表格单元格。绝对定位的元素相对于其最接近的祖先而言，其位置不是静态的。
根据浏览器设置<td>上的position可能会也可能不会，CSS2实际上表示在表元素results in undefined behavior上设置position:relative。

你需要把<div>放在你的<td>的相对位置。然后将图像放在<div>内，并且由于您正在处理电子邮件，请将其样式内联。其结果将是这样的：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div style="width: 100px; height: 100px; position: relative; border: 1px solid #000;"> 
        <img src="http://placekitten.com/50/50" width="50" height="50" style="position: absolute; top: 0; left: 10px; z-index: 2; border: 1px solid #0ff;"> 
        <img src="http://placekitten.com/75/75" width="75" height="75" style="position: absolute; top: 0; left: 20px; z-index: 1; border: 1px solid #f00;"> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

我已经添加边框，小猫，并用于演示目的在<div>明确的大小。这里有一个实时版本：http://jsfiddle.net/ambiguous/TkF24/

电子邮件客户端将过滤CSS和通过取决于客户端。您可能需要手动粘贴图像，然后只参考一张图像以使其可靠工作。

来源

2011-08-06 22:36:48

人们对堆栈溢出的帮助永远不会让我惊叹:)感谢您的回复！我现在就试试看。 – iman453

它可以在您发送的演示网站上运行，但是当我在我的电子邮件中插入完全相同的代码时，它会将它们排列在彼此旁边，而不是覆盖它们。无论如何，我可以下午你我的代码？（我用它来启动，不想公开发布它。）我明白它是否太麻烦。 – iman453

@ iman453：我真的不想看别人的非公开代码，这里面涉及一些道德问题。你能在jsfiddle上产生一个结构上等效的版本吗？可以在公开场合允许吗？ –

你不能在元素的style属性内写出一个类。样式定义应该在样式表或<style>元素

来源

2011-08-06 22:24:31 silverstrike

在html表格中覆盖图像

回答

相关问题