在另一個圖形上繪製鏈接和圖形

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>