html - HTMLメールの画像マスク

Question

テーブルベースのHTMLメールで画像を別の画像にオーバーレイする信頼できる方法はありますか？正しくレンダリングするには、スタイルをインラインにする必要があることに注意してください。

Answer 1

どうやら、すべての電子メールリーダーでbgイメージを機能させる唯一の方法は、bodyタグのHTML背景属性（Outlook 2007、2010の場合）とページ全体を占めるHTMLテーブルのHTML背景属性の両方に1つを指定することです。 （他のすべての電子メールリーダーの場合）。すべての電子メールリーダーに表示されるbg画像を他の場所に配置することは不可能のようです。

一般的に言えば、答えは「いいえ」です。フォアグラウンドコンテンツを他のフォアグラウンドコンテンツの上にオーバーレイすることはできません。また、bg画像を追加するためのオプションはほとんどありません。ただし、bodyタグ（およびテーブルラッパー）用の単一の大きなbg画像を、1つ以上の前景画像と組み合わせて管理できる場合は、「はい」です。

参照： http： //blog.mailermailer.com/2011/04/background-images-in-html-email-the-naked-truth/

編集：

リトマスで徹底的なテストを実行した後、答えははっきりとした「いいえ」です。Outlook 2007以降では、bg画像を表示する2つの方法のみがサポートされています。タグでHTMLbackground属性を使用する方法と、bodyタグでインラインbackground-imageスタイルを使用する方法bodyです。ただし、どちらの場合も、Outlookは他の電子メールリーダーとは異なる方法で画像を拡大縮小し、bg画像のタイリングを防ぐ方法はありません。

すべての実用的な目的で、さまざまな電子メールリーダーをサポートすることが重要な場合：

1. 画像（または他の種類のコンテンツ）をオーバーレイする方法はありません。
2. Bg画像はサポートされていません。

Answer 2

私が収集できるものから、背景画像はすべてのブラウザでサポートされているわけではありません。ただし、キャンペーンモニターのこのページが役立つ場合があります。少なくとも、コードをテストして、読者のニーズに合っているかどうかを確認するのは簡単です。私があなたである場合は、実装する前に、クライアントが機能する電子メール統計を確認してください。

「すべてのメールリーダーでbg画像を機能させる唯一の方法は、bodyタグのHTML背景属性の両方に1つを指定することです」に関する上記のアドバイスも正しいと思いますが、キャンペーンモニターはそうではないようです。どのブラウザ/電子メールクライアントがフォールバックを使用しているか、そしてそれがデザインに悪影響を与えるかどうかを慎重に検討します。

Gmailを除いてZインデックスがサポートされているので（おそらくそれほどうまくいかないかもしれません）、それを使用してデザインを作成することができます。Gmailはそれをサポートしておらず、フォールバックは罪として醜い可能性が高いことを考えると、おそらくこれを試してみたくないでしょう。