如何在有更多文本的情況下重複圖像

Question

我有像邊框一樣圍繞文本的圖像。所以一個圖像在上面，一個圖像在左邊，一個右邊和一個底部。當文字短時，這很好，但是當我插入比左右圖像的高度更長的文字時，它不再是邊框。我把它放在桌子上。我的代碼：

<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> 

和它的作品真的很好，當我在表上使用的邊界= 1，但我不想邊框。所以，當我把它放到0它擴大第二排，所以左上角和頂部圖像有很多空間：S

任何想法？

Answer 1

您應該使用CSS3 border-image屬性，而不是圖像。 看看this page

Answer 2

IMG標籤是爲了將單個圖像放在你的頁面上。如果你想重複一個區域的圖像，你將不得不通過css將其應用爲重複背景。 W3Schools有關於CSS Background的一篇很好的文章解釋了這一切。你會看到'背景圖像'和'背景重複'。