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的容器放置该div，在这种情况下，在左上角0前0.这意味着它将最终位于相同元素的左上角'backgroundimg'放在。

中

这有意义吗？

Answer 2

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

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

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>

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

3 个答案: