2012-10-02 7 views
0

테두리와 같은 텍스트를 둘러싸는 이미지가 있습니다. 하나의 이미지가 상단에, 하나의 이미지가 왼쪽에 하나의 오른쪽과 하나의 하단에 있습니다. 텍스트가 짧을 때는 괜찮지 만 왼쪽 및 오른쪽 이미지의 높이보다 긴 텍스트를 삽입하면 경계가 더 이상 없습니다. 나는 그것을 모두 테이블에 가지고있다. 내 코드 :더 많은 텍스트가있는 경우 이미지를 반복하는 방법

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

나는 작은 이미지 반복으로 처리해야한다는 것을 알고 있지만 어디에서 삽입해야합니까? 그리고 어떻게? 왼쪽, 오른쪽 및 바닥 글 사이에 항상 배치 할 수있는 2 픽셀 높이의 이미지가 있습니다.이 이미지는 srccontinues라고합니다. 나는 테이블에 국경 = 1을 사용하지만, 내가 경계를 싶지 않는 경우에 그래서 지금 내가

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

는 그것이 정말 좋은 작동 사용하고

. 그래서 내가 0에 그것을 두 번째 행을 확장하므로 왼쪽 상단 이미지 위에 많은 공간이 있습니다 : S

아이디어가 있으십니까?

+0

좋은 ideea @ Richard Otvos 대신 이미지를 사용하려면 CSS를 사용하고 이미지를 배경 이미지로 설정 한 다음 배경 이미지를 설정해야합니다. repeat-y; – Netra

+0

내 편집을 확인하십시오. – gabrjan

답변

2

이미지 대신 CSS3 border-image 속성을 사용해야합니다. 보기 this page

2

IMG 태그는 단일 이미지를 페이지에 배치하기위한 것입니다. 한 영역 위에 이미지를 반복하려면 CSS를 통해 반복되는 배경으로 적용해야합니다. W3Schools에는 CSS Background에 관한 모든 기사가 있습니다. '배경 이미지'와 '배경 반복'을 보게 될 것입니다.

관련 문제