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>

当我在桌子上使用border = 1时它确实很好用，但我不想要边框。所以当我把它放到0时它会扩展第二行，所以左上方有很多空间和顶部图像：S

有什么想法吗？

Answer 1

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

Answer 2

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

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

2 个答案: