26

背景とテキストとして画像があるニュースレターを作成しようとしています。これは簡単ですが、作業するにはこれが必要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>

しかし、見通しでは何もうまくいきません。修正方法がわかりません。アウトルック2007を使用しています。

どんな助けでも大歓迎です。

4

10 に答える 10

27

「防弾メール背景画像」の強力なツール (Outlook 2007/2010/2013 用の VML、および Outlook 2000/2003、Gmail、Hotmail 用の HTML/CSS...)

http://emailbg.net

例として：

    <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) の使用に役立ちます

msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx

www.w3.org/TR/NOTE-VML#_Toc416858389

于 2013-03-25T16:59:56.113 に答える
17

htmlOutlook で表示されるニュースレターに背景画像を追加することはできません。プロパティを無視するため、機能しません。

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/

于 2012-10-19T08:49:26.370 に答える
8

背景はOutlookで機能しますが<body>、電子メールのタグでのみ機能します。個人では機能せ<td>ず、メール全体でのみ機能します。

更新：または、Outlookの個々のページ要素に背景画像を追加できるVMLメソッドを使用することもできます。

これは、Outlookを含むほとんどのクライアントで機能します。

<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">

これは、Outlookを含むすべての主要な電子メールクライアントで機能する完全なコードです。100％幅のテーブルで背景にフォールバックするbackground-imageが設定されています。

<!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>
于 2012-11-06T21:13:59.020 に答える
1

これを行うことができた唯一の方法は、このコード (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>

ソース

于 2013-08-14T14:54:52.443 に答える
0

ここで説明されていることがあります：

https://web.archive.org/web/20140608170948/http://www.campaignmonitor.com:80/blog/post/3363/updated-applying-a-background-image-to-html-email

于 2012-12-11T09:17:30.523 に答える
0

body タグまたは表でのみ使用できます。このようなもの：

<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">

これは私にとってはうまくいきました。

于 2015-06-25T15:05:11.417 に答える
0

数か月前、会社で WYSIWYG メール エディタを使用していたときに、まさにこの問題が発生しました。背景画像がタグに適用されている場合、Outlook は背景画像のみをサポートし<body>ます。その他の要素では失敗します。

最終的に、私が見つけた唯一の回避策は<div>、テキスト入力に要素を使用することでした。その後、コンテンツ送信プロセス中に、コンテンツを含む AJAX リクエストを<div>PHP スクリプトに発行し、ヘッダー画像の空白バージョンにテキストを書き込みました。ファイルを保存し、その (一意に生成された) 名前を返しました。次に、Javascript を使用して を削除し、属性で返されたファイル名を使用してタグを<div>追加しました。<img>src

PHP Docs サイトimagecreatefrompng()のページからすべての情報/方法論を取得できます。

于 2012-10-19T08:29:14.370 に答える
0

すべての HTML および CSS が Microsoft Office 製品、特に Outlook でサポートされているわけではありません。HTML をレンダリングするときに Outlook で使用できる要素と使用できない要素については、こちらを参照してください。

具体的には、そのリンクから、要素backgroundに対して CSS プロパティがサポートされているとは述べていません。divを使用してimg、ハッキーなレイヤリングを行う必要がある場合があります。

2番目の例では、引用符の不一致があることに注意してください。これは役に立ちません。

最後に、提供されたリンクで見つけたのはOutlook HTML and CSS Validator ツールです。これをニュースレターのマークアップに対して実行してみて、提案や代替案が得られるかどうかを確認してください。

于 2012-10-19T08:23:32.950 に答える
-1

背景画像は Outlook ではサポートされていません。画像を使用し、相対位置または絶対位置を使用してテキストの後ろに配置する必要があります。

于 2012-10-19T08:47:21.380 に答える