Problem bei der Anzeige kleinerer Bilder auf größeren Bildern

Question

Ich möchte kleinere Bilder auf der oberen rechten Ecke eines größeren Bildes geben, die dynamisch generiert werden.

Ich versuche staticcally von largerimage als Hintergrundbild geben wie

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

aber in meinem Code td das größere Bild wird in div wie

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

angezeigt, wie auf das das kleinere Bild anzuzeigen

Answer 1

Sie können das kleinere Bild absolut über das größere Bild positionieren. Zuerst müssen Sie Ihrem DIV einen position: relative geben, um einen Referenzrahmen zu fixieren, dann können Sie position: absolute verwenden, um Ihr kleineres Bild zu positionieren. Beispiel:

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