0

境界線のようにテキストを囲む画像があります。つまり、上に 1 つの画像、左に 1 つの画像、右に 1 つの画像、下に 1 つの画像です。テキストが短い場合は問題ありませんが、左右の画像の高さよりも長いテキストを挿入すると、境界線ではなくなります。私はそれをすべてテーブルに持っています。私のコード:

<table cellspacing="0" cellpadding="0" style="width: 640px;">
   <tr>
      <td colspan="3"><img src=srctop.png /></td>
   </tr>
   <tr>
      <td>
         <img src=srcleft.png />
      </td>
      <td valign="top">
         <p>Lorem ipsum</p>
      </td>
      <td>
         <img align="right" src=srcright.png style="height:675px;"/>
      </td>
   </tr>
   <tr>
      <td colspan=3>
         <img src=srccontinuous.png />
      </td>
   </tr>
   <tr>
      <td colspan=3>
         <img src=srcfooter.png />
      </td>
   </tr>
</table>

小さな画像の繰り返しでそれをしなければならないことはわかっていますが、どこに挿入すればよいですか? そしてどうやって？左、右、フッターの間に常に配置できる高さ2pxの画像があります。これはsrccontinuesと呼ばれます。

だから今私はそれを使っています

<table border=1 cellspacing="0" cellpadding="0" style="width: 640px; border: transparent;" align="center">
    <tr>
    <td colspan="3"><img src="header.png" style="display: block"/></td>
    </tr>
    <tr>
    <td colspan="3"><img src="bg-top.png" style="display: block"/></td>
    </tr>
<tr style="height: 670px; border-left: thin solid black;">
    <td><img src="bg-left.png" style="display: block"/></td>
    <td valign="top" rowspan=2 ><p>Lorem ipsa erat. </p>
    <p>Lorem ipsum dol</p>

    </td>
    <td><img align="right" src="bg-right.png" style="display: block"/></td>
</tr>
<tr>
<td background="http://zmb-asistenca.bugs3.com/emailSlike/cont.png"></td>
<td background="http://zmb-asistenca.bugs3.com/emailSlike/cont.png"></td>
</tr>
<tr>
<td colspan=3><img src="bg-footer.png" style="display: block"/></td>
</tr>
</table>

テーブルでborder = 1を使用すると非常にうまく機能しますが、境界線は必要ありません。したがって、0にすると2行目が拡張されるため、左と上の画像の上に多くのスペースがあります:S

何か案は？

4

2 に答える 2

2

画像の代わりにCSS3border-imageプロパティを使用する必要があります。このページを見てみましょう

于 2012-10-02T10:41:18.777 に答える