큰 이미지에 작은 이미지를 표시 할 때의 문제

Question

나는 동적으로 생성되는 큰 이미지의 오른쪽 상단에 작은 이미지를주고 싶습니다.

나는

<table> 
    <tr> 
     <td width="220px" style="background-img: url(image url); background-repeat: no-repeat; height: 150px;" valign="top"> 
      <table width="100%"> 
       <tr style="height: 10%; width: 10%" valign="top"> 
        <td width="50%"> 
        </td> 
        <td width="20px" style="background-img: url(image url); background-repeat: no-repeat; height: 20px;"> 
        </td> 
       </tr> 
       <tr style="height: 90%"> 
        <td> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

처럼 TD하는 배경 이미지로 largerimage를 제공하여 staticcally하려고하지만 내 코드에서 큰 이미지는이 작은 이미지를 표시하는 방법을

<div style="height: 158px; width: 210px" onload="fun();"> 
    <a id="aproduct" runat="server"> 
    <image tag id="pimage" runat="server" width="210" height="158" border="0" />          
</div> 

같은 사업부에 표시됩니다

Answer 1

큰 이미지 위에 작은 이미지를 절대적으로 배치 할 수 있습니다. 먼저 div에 position: relative을 지정하여 참조 프레임을 수정해야하며 position: absolute을 사용하여 작은 이미지의 위치를 ​​지정할 수 있습니다. 예 :

<div style="height: 158px; width: 210px; position: relative;" onload="fun();"> 
    <a id="aproduct" runat="server"> 
     <img id="pimage" runat="server" width="210" height="158" border="0" /> 
    </a> 

    <!-- Here's the small image. Adjust top and left. --> 
    <img style="position: absolute; top: 10px; left: 10px;" src="url/to/image.jpg" /> 
</div>