Question

我有一个制作电子邮件模板的任务，并且遇到问题，我需要将一个元素堆叠在另一个元素之上：

在常规HTML / CSS中，如下所示：

<div class="element">
  <div class="icon"></div>
  <div class="count">6</div>
</div>

.element {
    position: relative;
    height: 60px;
    width: 60px;
}
.icon {
    position: absolute;
    bottom: 0;
    background: url('http://www.veryicon.com/icon/ico/System/Sticker%20Pack%201/Chat.ico') no-repeat;
    width: 48px;
    height: 48px;
    background-size: 100%;
}

.count {
    position: absolute;
    right: 5px;
    width: 20px;
    text-align: center;
    display: inline-block;
    padding: 5px;
    background-color: #F33689;
    color: #FFF;
    font-family: sans-serif;
    border-radius: 5px;
    font-size: 18px;
}

检查result here

是否有人知道是否可以通过使用几乎所有客户端都可以使用的电子邮件客户端所允许的技术来实现此结果？

我认为我可以尝试：

负边距（不适用于所有客户）
背景图片（不适用于所有客户）
绝对/相对位置（不适用于所有客户）
...？

谢谢

Answer 1

到目前为止，只有在HTML / CSS中才能实现的唯一方法就是将表格布局与图像切成多个其他图像，并将“计数”区域保持为简单<td>我可以放在哪里我想要的任何文字：

enter image description here

Answer 2

渲染解决方案（我知道你想避免这种情况，但它是在每个电子邮件客户端工作的那个）

你的.htaccess

RewriteEngine On

RewriteBase /

RewriteRule ^imageGenerator.php - [L]

RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^media/cache/(([0-9]+)(.*\.(jpg|png|gif)))$ imageGenerator.php?cachename=$1&count=$2&filename=$3&type=$4 [L]

RewriteRule ^media - [L]

在您的imageGenerator.php中，您可以使用变量：

$_GET['cachename'];
$_GET['count'];
$_GET['filename'];
$_GET['type'];

//create your image and save it

使用此机制，您生成的请求计数一次。之后，存储的图像被传递。

在您发送的HTML中，您可以轻松使用：

<img src="http://example.com/media/cache/99-messages.jpg" />

电子邮件模板 - 堆叠元素？

2 个答案: