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

Question

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

- Ciel

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 属性将使该 div 相对于已设置了 position 属性的容器定位，这里设置为在左侧 0 顶部 0。因此，它将出现在“backgroundimg”所放置的相同元素的左上角。

明白吗？

- Ipsquiggle

---

是的，那很有道理。谢谢！ - Ciel

这是一个很棒的解决方案。谢谢！ - Mike

将属性"url"替换为"src"。 - Andreas Kuckartz

Answer 2

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

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

- isaac

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

- dfens

---

如果您正在设置背景，则不需要设置position:absolute，因为它无论如何都会重叠在背景上。 - Ipsquiggle