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

【问题标题】：Draw a Link and Graphic over another graphic在另一个图形上绘制链接和图形
【发布时间】：2012-09-08 06:39:44
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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 将把该 div 相对于设置了position 的容器放置，在本例中位于左 0 上 0。这意味着它将最终位于与“backgroundimg”相同的元素的左上角放在里面。

这有意义吗？

【讨论】：

是的，这很有意义。谢谢！
这是一个很好的解决方案。谢谢！
将属性“url”替换为“src”。

【解决方案2】：

不要使用过多的 div。

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

【讨论】：

【解决方案3】：

简化：

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

【讨论】：

如果要设置背景，则无需设置 position:absolute，因为无论如何它都会与背景重叠。