<td>高さが動的で幅が固定されたHTMLメールがあります。
Outlook 2007、2010、2013、Gmailでも機能するこのセルに（垂直方向に）繰り返される背景画像を追加するにはどうすればよいですか？
セルは視覚的な目的のためだけにあるため、セルにはコンテンツが含まれていません。ただし、コンテンツセルの隣にあるため、高さを動的にする必要があります。
質問する
16303 次
5 に答える
5
2013年8月の更新：これがまだジョンに役立つとは思えません。B、しかし私はこの問題を抱えているかもしれない人のために簡単なアップデートを提供したかっただけです。
前に説明した問題を修正し、背景画像が単色の背景の下から覗くのを防ぐことができました。
更新されたコードは次のとおりです。
<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
<v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100"></td>
<td bgcolor="#ffffff" width="100">
The<br/>
background<br/>
image<br/>
on<br/>
the<br/>
left<br/>
will<br/>
stretch<br/>
to<br/>
the<br/>
height<br/>
of<br/>
this<br/>
content.
</td>
</tr>
</table>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
ここでの修正は行です
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>
テキストボックスの終わりの直前で、これについては、前のコメントで参照したMicrosoftOfficeTechCenterスレッドで説明しました。
私の最初の答え：
私はこれをほとんどクラックすることができましたが、完全ではありません。だから私は誰かがそれに基づいて完全に機能するソリューションを投稿できることを期待してこれをここに投稿しています。
テーブルセルやその他の高さが定義されていない領域を実際に埋めるための背景画像を取得することはできないと確信しています。ただし、[VMLTextBox][1]と[VMLFillElement] [2]をテーブルの周囲で使用し、背景画像とフォールバックカラーを定義して、コンテンツの高さまで伸ばすことができます。
次に、このテキストボックス内に、2列のテーブルを配置します。一方は透明な背景で、もう一方は無地の背景色で、説明したレイアウトをエミュレートします。
Outlook以外の電子メールクライアントの場合は、テキストボックスの周囲に、同じ背景画像とフォールバックカラーで別のテーブルをラップします。
これですべてうまくいきますが、私が抱えている問題は、Outlook/Wordレンダリングエンジンがテキストボックス内のテーブルの下に空白行を追加することを要求していることです。そのため、Outlookはコンテンツの横に沿って背景画像を繰り返しますが、外側のテーブルの全幅に背景画像の行も追加します。
Outlook 2007+で以下をテストして、これまでの内容を確認してください。
<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200"> <tr> <td> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;"> <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" /> <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0"><span style="font-size: 0px;"> <![endif]--> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100"></td> <td bgcolor="#ffffff" width="100"> The<br/> background<br/> image<br/> on<br/> the<br/> left<br/> will<br/> stretch<br/> to<br/> the<br/> height<br/> of<br/> this<br/> content. </td> </tr> </table> <!--[if gte mso 9]> </span></v:textbox> </v:rect> <![endif]--> </td> </tr> </table>私が試したいくつかの解決策：
- 空白行のfont-size/line-heightを0に設定します（上記のサンプルコードでこれを行いましたが、0ではなく1pxとしてレンダリングされます）
- 空白行を避けるために、テーブルの代わりに別の要素を使用してください。
<p>：固定幅には設定できません。<div>：背景色を設定できません。<span>：ブロックレベルの要素としてレンダリングすることはできません。うまくいけば、誰かがこの残りの問題の解決策を共有することができます。John B.、コーディングしている実際のコードまたはレイアウト、および背景画像を投稿できる場合は、どのハックが機能する可能性があり、どの制限を考慮する必要があるかを判断するのにも役立ちます。
たとえば、背景画像が高さ1ピクセルの繰り返し画像である場合、実際の画像の代わりに、背景色が異なる1ピクセル幅のテーブルセルの行を使用できます。
[1]： http: //msdn.microsoft.com/en-us/library/bb264073%28v=VS.85%29.aspx [2]：http: //msdn.microsoft.com/en-us/library /bb229596%28v=VS.85%29.aspx
于 2012-11-14T22:01:46.580 に答える
0
私はずっと前からOutlookを使用していませんが、これは少なくともgmailではうまくいくようです：
<td width="200" style="background-repeat: repeat-y;" background="http://the-location.com/backgroundImage.jpg"></td>
ヒントは、（非推奨の）background属性を使用して、属性内ではなく画像を配置することです。ただしstyle、プロパティを設定できます（属性内にcssプロパティとして追加するのではなくrepeat-y、属性を使用していることにも注意してください...しかしあなたが言ったように、あなたがhtmlメールを作成するまでだけあなたは私たちが話していることを知っています;）widthstyle
これはニュースレターで何度も行っていますが、Outlookユーザーにテストを送信したときにメールが正しく表示されないという報告はありません。
于 2012-11-11T22:10:33.320 に答える
0
HTMLメールを作成するときは、さまざまなクライアント間の違いに注意する必要があります。
このガイドが役立ちます。たとえば、Outlook 2007/2010では、background-repeatはサポートされていません。奇妙なことに、それはバージョン2003でサポートされていました。
于 2012-11-12T00:10:52.820 に答える
0
Outlook2007/2010および2013で繰り返し背景画像を実現する方法はないようです。
JFKのテストのプレビューは次のとおりです。http ：//www.emailonacid.com/app/acidtest/viewresult/nWC9hJ5N0BvkZIk4Zvz724rMQm19MUsCJ0shOIFcWgGMh 。残念ながら、それも機能しません。
CampaignMonitorには、さまざまなクライアントでのHTMLおよびCSSサポートに関する非常に便利なガイドがあります：http：//www.campaignmonitor.com/css/
Outlook 2007/2010および2013で固定サイズの背景画像のみが必要な場合は、VMLオブジェクトが役立つ場合があります：https ：//www.campaignmonitor.com/forums/viewtopic.php？pid = 14197
于 2012-11-12T18:51:04.947 に答える
-2
笑、愚かな開発者。複雑なテーブルを作成するだけで、ほとんどの主要な電子メールクライアントでコンテンツのない垂直方向の繰り返し背景を簡単に実現できます。
たとえば、ジョンの場合、コンテンツを保持するメインコンテンツ「td」と一緒に「tdwidth = "1" bgcolor = "＃XXXXXX"/td」の組み合わせを簡単に作成できます。メインコンテンツtd内にテーブルをネストして、内部のパディングと高さをスムーズに制御できるようにすることを強くお勧めします。
このスタイルのコーディングは、電子メールの土地で垂直方向の液体レイアウトを実現するための最良の方法です。先に進んで、始めましょう。インデントは少しずれていますが、これはコード編集の状況が悪く、エンドテーブルが表示されません。いずれにせよ、あなたはその考えを理解します。
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="1" bgcolor="#e4e4e4"></td>
<td width="1" bgcolor="#e1e1e1"></td>
<td width="1" bgcolor="#dadada"></td>
<td width="1" bgcolor="#cfcfcf"></td>
<td width="1" bgcolor="#c6c6c6"></td>
<td valign="top" align="center" width="200">
<!-- Main Content Cell -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" height="200">
<!-- I can be whatever height and still not break this cell's makeshift background -->
</td>
</tr>
</table>
<!-- End Main Content Cell -->
</td>
<td width="1" bgcolor="#c6c6c6"></td>
<td width="1" bgcolor="#cfcfcf"></td>
<td width="1" bgcolor="#dadada"></td>
<td width="1" bgcolor="#e1e1e1"></td>
<td width="1" bgcolor="#e4e4e4"></td>
</tr>
また、これは後から考えたものですが、私はこの言語をVMLと呼ばれるOutlookに使用していました。背景には美しく機能しますが、繰り返しのことはしません。ここで良い紹介をチェックできます：http：//blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/
于 2012-11-14T16:18:42.997 に答える