如果有更多文本，如何使图像重复答案

【问题标题】：How to make an image repeat if there is more text如果有更多文本，如何使图像重复
【发布时间】：2012-10-02 20:47:11
【问题描述】：

我的图像像边框一样围绕文本。所以上一图，左一图，右一图，下图。当文本很短时很好，但是当我插入比左右图像的高度更长的文本时，它不再是边框了。我把它都放在一张桌子上。我的代码：

<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

有什么想法吗？

【问题讨论】：

如果你想使用图像而不是@Richard Otvos 建议你需要使用css并将图像设置为背景图像，然后设置 background-image: repeat-y;

标签： html image html-table htmltext

【解决方案1】：

您应该使用 CSS3 border-image 属性，而不是图像。看看this page

【讨论】：

【解决方案2】：

IMG 标记旨在将单个图像放置到您的页面上。如果您希望在某个区域上重复图像，则必须通过 css 将其应用为重复背景。 W3Schools 在CSS Background 上有一篇很好的文章解释了这一切。您将看到“背景图像”和“背景重复”。

【讨论】：