html - 将热点添加到具有背景图像的 DIV

Question

是否可以在带有背景图片的 div 中添加热点？

非常感谢。

埃里克

Answer 1

当然可以，只需在相对定位的 div(带有背景图片)内使用绝对定位的链接即可。

示例 HTML

<div class="hotspot-container">
    <a href="some-href-for-the-hot-spot" class="hotspot">&nbsp</a>
</div>

CSS

.hotspot-container {
  width: 200px; height: 200px;
  position: relative;
  background: url(some-background-image) no-repeat;
}
  .hotspot-container .hotspot {
    width: 10px; height: 10px;
    position: absolute;
    top: 20px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
    left: 20px; /* Left coord of hotspot (right: 20px is also valid); */
  }