Outlookのニュースレターで背景画像を作成する方法
私はニュースレターを作成しようとしていますが、背景とテキストとしていくつかの画像があります。これは簡単ですが、MS Outlook。
私が試したもの：
1。
<td width="100" height="100" style="background: url('someurl');">text</td>
2。
<td width="100" height="100" background="someurl">text</td>
3。
<td width="100" height="100">
<div style="width: 0px; height:0px; position: relative;">
<div style="width: 100px; height: 100px; position: absolute; background: url('someurl')">
text
</div>
</div>
</td>
しかし、Outlookではうまく機能しません。どのように修正するのかわかりません。 Outlook 2007を使用しています。
任意の助けをいただければ幸いです。
「防弾メール背景画像」用の強力なツール（Outlook 2007/2010/2013のVML、およびOutlook 2000/2003、Gmail、HotmailのHTML/CSS ...）
例として：
<div style="background-color:#f6f6f6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-Microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">
</td>
</tr>
</table>
</div>
完全なメール本文に指定された背景画像を持つため。
このリンクは、Vector Markup Language（VML）を使用するのに役立ちます
outlookで表示されるhtmlニュースレターに背景画像を追加することはできません。プロパティを無視するため、機能しません。
ブロック色（background-color）テキストの背後。
Outlookは次のCSSをサポートしていません。
azimuth
background-attachment
background-image
background-position
background-repeat
border-spacing
bottom
caption-side
clear
clip
content
counter-increment
counter-reset
cue-before, cue-after, cue
cursor
display
elevation
empty-cells
float
font-size-adjust
font-stretch
left
line-break
list-style-image
list-style-position
marker-offset
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
overflow-x
overflow-y
pause-before, pause-after, pause
pitch
pitch-range
play-during
position
quotes
richness
right
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-shadow
text-transform
top
unicode-bidi
visibility
voice-family
volume
widows
Word-spacing
z-index
ソース： http://msdn.Microsoft.com/en-us/library/aa338201.aspx
更新-2015年7月
時々奇妙な賛成票を得るので、このリストを更新するのが最善だと思いました-現在のメールクライアントサポートへの素晴らしいリンクはここにあります： https://www.campaignmonitor.com/css/
バックグラウンドはOutlookで機能しますが、電子メールの<body>タグでのみ機能します。個々の<td>では機能せず、メール全体でのみ機能します。
更新：または、 VMLメソッドを使用 を使用すると、Outlookの個々のページ要素に背景画像を追加できます。
これは、Outlookを含むほとんどのクライアントで機能します。
<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">
Outlookを含むすべての主要なメールクライアントで機能する完全なコードを次に示します。これは、100％幅のテーブルで背景にフォールバックするように設定された背景画像を持っています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body style="margin: 0px; padding: 0px; background-image: url('http://lorempixel.com/output/food-q-c-100-100-7.jpg'); background-color: #0D679C; background-position: top center;" bgcolor="#0D679C">
<!-- BODY FAKE PANEL -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/output/food-q-c-100-100-7.jpg">
<tr>
<td>
<!-- CENTER FLOAT -->
<table width="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="1000" align="center" valign="middle">
Center panel
</td>
</tr>
</table>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
以下のコードを使用できます。
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-Microsoft-com:vml" fill="true" stroke="false"
style="width: 700px; height: 460px;">
<v:fill type="tile" src="images/feature-background-01.png" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
注：背景画像が必要なテーブルの上にこのコードを含めます。また、表の終了タグの後に、下記の終了タグを追加します。
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
これを行うことができた唯一の方法は、このコード（TDテーブル）を使用することです。 Outlookクライアント2010でテストしました。Webメールクライアントでもテストしましたが、両方で機能しました。
あなたがしなければならない唯一のことは、your_image.jpg（同じ画像に対してこのインスタンスが2つあるので、コードの両方を更新するようにしてください）と#your_colorを変更することです。
<td bgcolor="#your_color" background="your_image.jpg">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-Microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>
<v:shape xmlns:v="urn:schemas-Microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
<![endif]-->
<p>Text over background image.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
Bodyタグまたはテーブルでのみ使用できます。このようなもの：
<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">
これは私のために働いた。
数か月前、私の会社のWYSIWYGメールエディターで作業していたときに、まさにこの問題がありました。 Outlookは、<body>タグに適用されている場合にのみ背景画像をサポートします-その他の要素は失敗します。
最後に、私が見つけた唯一の回避策は、テキスト入力に<div>要素を使用することでした。その後、コンテンツ送信プロセス中に、テキストを書き込むAJAXスクリプトに<div>のコンテンツを含むPHPリクエストを発行しましたヘッダー画像の空白バージョン、ファイルを保存し、その（一意に生成された）名前を返しました。次に、Javascriptを使用して<div>を削除し、src属性で返されたファイル名を使用して<img>タグを追加しました。
PHP Docs site のimagecreatefrompng()ページからすべての情報/方法を取得できます。
背景画像はOutlookではサポートされていません。画像を使用し、相対または絶対位置を使用してテキストの後ろに配置する必要があります。
すべてのHTMLおよびCSSがMicrosoft Office製品、特にOutlookでサポートされているわけではありません。 HTMLをレンダリングするときにOutlookで使用できるものと使用できないものについて、サポートされている要素で 参照はこちらを参照 を取ります。
具体的には、そのリンクから、background要素に対してdiv CSSプロパティがサポートされているとは記載されていません。 imgを使用して、いくつかのハッキングレイヤーを作成する必要がある場合があります。
2番目の例では、引用符の不一致があることに注意してください。
最後に、提供されたリンクで私が出会ったのは Outlook HTMLおよびCSS Validatorも lです-ニュースレターマークアップに対してそれを実行して、提案/代替案が提供されるかどうかを確認できます。