2 
<!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 を使用できませんか?

4

2 に答える 2

10

更新: このリストは次の場所に移動しました: HTML メールを作成する際のベスト プラクティスと考慮事項

z-index、div、position、float は使用しないでください。基本的に、HTML メールへのアプローチ全体が間違っています。Html メールは、Web 用の html とは別物です。以下にいくつかのリソースを示します。

これらの情報の小さな部分は、技術的に 100% 正しいとは限りません (HTML メールは本当に黒魔術です)。

追加のサポート ガイド:

Outlook でも背景画像を機能させるには、 VMLを使用する必要があります。ここにいくつかの VML リンクがあります:

CSS は常に html-email にインライン化する必要があります。CSS インライン化ツールのリストへのリンクは次のとおりです。

于 2013-11-05T14:26:36.473 に答える
2

Gmail は z-indexing をサポートしていない唯一のクライアントであるため、そのようです。http://www.campaignmonitor.com/css/

多分これがあなたの問題の核心です。また、eblast で画像の上にテキストを表示する理由をお聞きしてもよろしいですか? 簡単な解決策は、画像を要素の背景にし、その中にテキストを入れることです。複雑なマークアップは、メール キャンペーンに混乱をもたらす可能性があります。

テキストをフォトショップで画像に入れるか、画像を背景にします。

于 2013-11-05T01:55:00.393 に答える