html - 使图像的一部分可点击

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 和/或图像的方式移动链接并为其设置样式。