Question

我有这样的背景图像

HTML

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

我希望图片区域的一部分可以点击，以便将我链接到下一页，这样做的任何简单方法都可以吗？

Answer 1

您始终可以将relative和z-index链接到正确的位置：

<div id="background">
    <img src="stock.png" class="stretch" alt="image" />
    <a href="path/to/url/" class="link"></a>
</div>

然后像：

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}
.stretch {
    width:100%;
    height:100%;
    z-index:1;
}
.link {
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    z-index:2;
}

然后使用CSS和/或图像移动并设置链接样式。

Answer 2

使用position: absolute;添加另一个div然后用此

定义他的位置

left:100px;
top:100px;

Answer 3

我知道这是一个老问题，但在我看来，最简单和最好的方法是使用图像地图。他们非常直接，基本上你可以在图像上定义可点击的形状（矩形，圆形，甚至多边形，但我从未使用过那些）。形状的坐标和大小都与图像有关，因此非常灵活。

http://www.w3schools.com/tags/tag_map.asp解释了如何使用它。

使图像的一部分可点击

3 个答案: