在另一个图形上绘制链接和图形

Question

我在页面上有一张图片，我只是想在图片的左上角绘制一个带有小图片的链接。有没有办法做到这一点？恰当地将它重叠在图片上？

Answer 1

像这样的工作（建议内嵌CSS移动到课程的样式表）：

<div style="position:relative"> 
    <div> 
     <img src="backgroundimg.png"> 
    </div> 
    <div style="position:absolute; left:0; top:0;"> 
     <a href="foo.html"><img src="smallgraphic.png"></a> 
    </div> 
</div> 

的position:absolute将相对于容器该专区将与position集，在这种情况下，在左侧0顶部0.因此，这意味着它将在“backgroundimg”所在的相同元素的左上角结束。

这是否有意义？

Answer 2

简化：

<div style="background:url(yourimage.jpg); position:relative;"> 
<div style="position:absolute; left:0; top:0;"> 
     <a href="somewhere.html"><img src="inner.jpg"></a> 
    </div> 
</div> 

或：

<div style="background:url(yourimage.jpg); position:relative;"> 
    <a href="somewhere.html"><img src ="innerimage.jpg" style="position:absolute; left:0; top:0;"/></a> 
</div> 

或：

<div style="background:url(yourimage.jpg); position:relative;"> 
     <a href="somewhere.html" style="position:absolute; left:0; 
top:0;display:block;width:100px;height:100px;"></a> 
    </div> 

Answer 3

比你需要的，不要使用更多的div。

<div style="position: relative;"> 
    <a style="position: absolute; top: 0; left: 0;"> 
    <img src="..." /> 
    </a> 
    <img src="..." /> 
</div>