2016-10-17 11 views
0

私はコーディングしているHTMLメール用のイメージが重なっているCTAボタンを作成しようとしています。イメージオーバーラップの背景用のHTMLテーブル

私はそれを構築するための行動計画を持っていますが、ブラウザや電子メールクライアントでは機能しないようです。 Google Chromeでうまく見えるが、他の多くのブラウザやクライアントで壊れてしまう(例えばCodepen)

私が作成しようとしているもののスクリーンショットcodepen。どこが間違っていますか?

enter code hereここは私のcodepenです。

ありがとうございました!このよう

+1

はなぜ全部一枚の画像を作ってみませんか? HTML電子メールは痛みです。 – ceejayoz

+0

なぜハーフピクセルを使用しますか?ほとんどのデバイスは半ピクセルをレンダリングできません。 – Aloso

+0

ええと、私は、一部のデバイスが半ピクセルをしていないことに気づいていませんでした。情報のためのTy。イメージを作成するという意味では可能ですが、HTMLテキストが非常に鮮明に見えるので、これを試してみたいと考えています – brando

答えて

1

それが動作するはずです:

<table cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td width="118" style="width: 118px;"> 
 
     <table border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
      <td width="118" height="9" style="font-size: 9px; line-height: 9px; height: 9.5px;"></td> 
 
     </tr> 
 
     <tr> 
 
      <td bgcolor="#0069aa" height="48" style="color: #ffffff;font-style: italic;font-weight: bold;text-align: center;font-size: 10px !important;background-color: #0069aa;line-height: 16px !important; font-size: 15.5px !important;"> 
 
      Download 
 
      <br />FREE e-book</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td width="54" height="57" bgcolor="#0069aa" style="width: 54px; background-color:#0069aa; vertical-align:top;"> 
 
     <img width="54" src="http://www.camping-trafoi.com/pricelist/dog.gif" alt="" style="display:block;margin:0;padding:0;"> 
 
    </td> 
 
    <td width="8" height="57.5" style="height: 57.5px;width: 8px;"> 
 
     <table cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
      <td height="9.5" style="height: 9.5px; font-size: 9.5px; line-height: 9.5px;"></td> 
 
     </tr> 
 
     <tr> 
 
      <td height="48" bgcolor="#0069aa" style="height: 48px; background-color: #0069aa;font-size: 48px; line-height: 48px;">&nbsp;</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

+0

魅力的に働いてくれてありがとう! – brando