2

我以这种方式应用了背景图像

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%;
}

我想让图像的一部分区域可点击，以便它将我链接到下一页，有什么简单的方法吗？

4

3 回答 3

3

您总是可以建立一个链接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 和/或图像一样移动和设置链接样式。

于 2013-03-20T22:14:07.807 回答
1

那么添加另一个div，position: absolute;然后用这个定义他的位置

left:100px;
top:100px;
于 2013-03-20T22:10:38.217 回答
1

我知道这是一个老问题，但在我看来，最简单和最好的方法是使用图像映射。它们非常简单，基本上您可以在图像上定义可点击的形状（矩形、圆形，甚至多边形，但我从未使用过这些）。形状的坐标和大小都是相对于图像的，因此非常灵活。

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

于 2014-07-24T17:42:42.843 回答