html - 在 html 表格中叠加图像

Question

我正在创建一个电子邮件模板并使用表格来定位内容。我想将一张图片重叠在另一张图片上，但我做不到。我在一行中使用以下内容，但它似乎不起作用。如果有人能帮助我，我将不胜感激。

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

Answer 1

你有几个问题:

1. 不能将类放在 style 中属性。
2. 显然，您正试图绝对定位您的图像，但它们的父级有 position: static (默认)因此它们将相对于(可能)正文而不是表格单元格定位。绝对定位的元素相对于它们最近的祖先定位，其位置不是静态的。
3. 设置 position在 <td> 上可能会或可能不会工作取决于浏览器，CSS2 实际上说设置 position:relative在表格元素上 results in undefined behavior .

您需要输入 <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，而通过的内容取决于客户端。您可能必须手动将图像粘贴在一起，然后仅引用一个图像以使其可靠地工作。