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>

但在我的代码中，较大的图像以div显示，如

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

在较大图像上显示较小图像的问题

1 个答案: