Question

以下是可能的：

我有一个一个图像，我希望不同的悬停“检测”区域，而不会将图像切割成与我想要的悬停区域相同数量的图像。这是一种已知的技术还是优先切割图像？

Ex：http://postimage.org/image/v6riryiov/

如果建议如何，我该如何完成？

Answer 1

您可以将该图片作为背景容器，然后在该容器内定义4个div，每个容器具有不同的ID，width和height。如下所示：

<div id="container">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

CSS

#container { width:800px; height:800px; background:url(path/to/img.png) no-repeat }
#container > div { height:800px }
#d1, #d2 { width: 300px }
#d3 { width: 100px }
#d4 { width: 200px }

Answer 2

将绝对定位的Div放在图像上！

你应该用div定位相对来包装图像！

<div style="position: relative;">
<img />
<div id="area1" style="position absolute; top:yourvalue; left: yourvalue;"></div>
<div id="area2" style="position absolute; top:yourvalue; left: yourvalue;"></div>
</div>

相同图像不同的悬停区域

2 个答案: