Html 新闻稿中忽略了z索引 感谢您订阅我们的时事通讯! img.img{ z指数:-1; 位置:绝对位置; 浮动:左; } .内容{ 位置:相对位置; z指数:5; } 文本应用程序

Html 新闻稿中忽略了z索引 感谢您订阅我们的时事通讯! img.img{ z指数:-1; 位置:绝对位置; 浮动:左; } .内容{ 位置:相对位置; z指数:5; } 文本应用程序,html,css,z-index,newsletter,Html,Css,Z Index,Newsletter,例如,当我将此新闻稿发送到gmail时,z索引被忽略。我想要的是img上的文字。但它将首先渲染图像,然后渲染文本 基本上忽略了z索引。这可以解决,或者我不能使用z-index?Gmail是唯一一个不支持z-index的客户端,看起来是这样的 也许这是你问题的核心。另外,我可以问一下,为什么您希望文本显示在电子束上的图像上?简单的解决方案是将图像作为元素的背景,并将文本放在其中。任何复杂的标记都可能导致电子邮件活动的混乱 要么用photoshop将文本处理成图像,要么用图像作为背景 更新:此列表已

例如,当我将此新闻稿发送到gmail时,z索引被忽略。我想要的是img上的文字。但它将首先渲染图像,然后渲染文本


基本上忽略了z索引。这可以解决,或者我不能使用z-index?

Gmail是唯一一个不支持z-index的客户端,看起来是这样的

也许这是你问题的核心。另外,我可以问一下,为什么您希望文本显示在电子束上的图像上?简单的解决方案是将图像作为元素的背景,并将文本放在其中。任何复杂的标记都可能导致电子邮件活动的混乱

要么用photoshop将文本处理成图像,要么用图像作为背景

更新:此列表已移至此处:

您不应该使用z索引、div、position或float。基本上,你处理html电子邮件的整个方法都是错误的。Html电子邮件与Html for web不同。以下是一些资源:

其中一些邮件中的一小部分信息在技术上并非100%正确(html电子邮件确实是一种黑色艺术),但它们会让你达到99%的正确率

其他支持指南:

您还需要使用以使背景图像在Outlook中工作。以下是一些VML链接:

您应该始终在html电子邮件中内联CSS。以下是指向CSS内联工具列表的链接:


在世界停止使用过时的邮件客户端之前,您基本上必须按照1990年编写网站的方式编写html电子邮件。您可以使用z-index,但许多服务将忽略它。除此之外,绝对定位元素上的float没有任何用处。您可能需要指定顶部和左侧。或者尝试将图像应用为背景图像,但这也取决于邮件客户端的交付。旁注:并非所有电子邮件客户端都支持
中的CSS;有些人会把它剥掉。使用内嵌CSS的HTML电子邮件。同时考虑到仅仅是一个图像增加了你的新闻快讯被认为是垃圾邮件的机会。我们鼓励您拥有一个“健康”的文本图像比,但是您希望定义它。
<!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>