<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Thank you for subscribing to our newsletter!</title>
<style>
img.img {
z-index: -1;
position: absolute;
float:left;
}
.content {
position: relative;
z-index: 5;
}
</style>
</head>
<body>
<div style="width: 750px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
<img class="img" src="email.png" />
<div class="content">
<h1>Text<small>app</small></h1>
</div>
</div>
</body>
</html>
例如,当我将此简报发送到gmail时,将忽略z-index。我想要的是img上的文字。但它将首先渲染图像然后再渲染文本。
基本上忽略了z-index。这可以解决,或者我不能使用z-index?
答案 0 :(得分:10)
更新:此列表已移至此处:Best Practices & Considerations when writing HTML Emails
你不应该使用z-index,divs,position或float。基本上你的整个html电子邮件方法是错误的。 Html电子邮件是一个不同的野兽html for web。以下是一些资源:
其中一些信息的一小部分在技术上并非100%正确(html电子邮件确实是一种黑色艺术),但它们会让你99%的方式。
其他支持指南:
您还需要使用VML来获取在Outlook中运行的背景图片。以下是一些VML链接:
您应该始终在html-email中内联CSS。以下是CSS内联工具列表的链接:
答案 1 :(得分:2)
Gmail是唯一不支持z-indexing的客户端。 http://www.campaignmonitor.com/css/
也许这是你问题的核心。另外,请问您为什么要在eblast上的图像上显示文字?简单的解决方案是让图像成为元素的背景,并在其中包含文本。任何复杂的标记都可能导致电子邮件广告系列混乱。
将文本放入图像或将图像作为背景。