web-dev-qa-db-ja.com

背景画像スタイルのhtmlメールは表示されていません

外部のウェブサイトからの画像を表示する必要があるメールテンプレートを作成しています。画像をレンダリングするためにいくつかの<img>タグを配置しましたが、要素のインラインcssにbackground-imageプロパティが設定された<td>タグがいくつかあります。

これで、Outlookで電子メールを受信したときに、画像が表示されなくなりました（画像が埋め込まれていないため、これは予想されます）。そして、ダウンロード画像をクリックして、画像を正しく表示します。 <IMG>タグ内の画像のみが表示され、<TD>の背景画像はレンダリングされません。

この問題を解決することについて何か意見はありますか？

ありがとう！

emailhtml-email
11
Chaitanya

ついに答えが見つかりました。

Outlook 2007は、HTMLコンテンツの読み込みにInternetExplorerのレンダリングエンジンを使用しません。代わりに、Word 2007のHTMLおよびCSS機能を使用します。

このため、background-imageなどのCSS属性はサポートされていません。したがって、標準のCSSタグを使用してOutlookでHTML要素の背景画像を設定することはできません。

詳細については、 http://msdn.Microsoft.com/en-us/library/aa338201（v = office.12）.aspx を参照してください。

7
Chaitanya

背景画像はOutlookではサポートされていません。ベストプラクティスとして、HTMLメールで背景画像を使用しないでください。背景が必要な場合は、単色に加えて画像を使用できます。背景画像をサポートしている電子メールクライアントを使用している場合は画像を取得し、サポートしていない場合は単色にフォールバックします。

4
timroman

OutlookのHTMLメールで背景画像を使用する方法が実際にあります。

Chaitanyaが述べているように、CSSでは実行できませんが、VMLでは実行できます。

この手法は、background: url(....)を使用するよりも少し複雑であり、CSS手法を使用するほど頻繁には使用しません（Outlookで機能する場合）。しかし、それは非常に便利です。

私はそれを多くのキャンペーンでうまく使用しました。

ここでの完全な説明：この手法をサポートする電子メールクライアントのリストを含みます。

http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

4
Che Mearns

また、キャンペーンモニターのガイドは次のとおりです。 http://www.campaignmonitor.com/css/ これは私にとって非常に役立ちました。

3
Evan Lecklider

HTML画像を表示する方法があります。

OutlookでMSWordドキュメントとしてレンダリングされた正しいHTMLメール。

私はこれから解決策を得ました https://stackoverflow.com/a/12693917/413032 投稿。

したがって、代替が必要です。

実際、MSWORDでHTMLメールを開いて、何が間違っているように見えるかを見つけ、何が代替できるかを検討することでアイデアが得られます。

これが私がしたことです;

  1. Htmlタグにv名前空間を追加しました

      < html xmlns:v="urn:schemas-Microsoft-com:vml"

  2. ヘッドブロックにvのスタイルを追加しました

    < head >
 <style type="”text/css”">
       v\:* { behavior: url(#default#VML); display:inline-block}
 </style>

  3. テーブル内またはMSWordの代替を追加する必要がある場所

    <table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
            <!--[if gte vml 1]>
                    <v:shape 
                        stroked='f'
                         style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;     
                                z-index:-503306481;
                                visibility:visible;
                                width:720pt;
                                height:475pt;           
                                top:0;
                                left:0;
                                border:0;                                               
                                '>
                        <v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
                    </v:shape>
            <![endif]-->
                <tbody> ....

以上です。確かにそれはMSWordのレンダリングになります。さらに、お気づきのように、絶対配置を使用しています...

とにかく、これは回避策であり、ある意味で問題を解決します。いつの日か、MS-OutlookがMS-WordではなくWebブラウザでhtml電子メールをレンダリングすることを願っています。

1
Davut Gürbüz

これはGmailで機能します。

メールマガジンに画像付きのdivを表示するためにこれを試しました。 インラインcss 、メールガイドラインの送信 ここ

0
shaijut