Question

我想创建一个以下链接，以便图像可以点击。

如何让背景图片可点击？

HTML：（显示我想点击的图片）

<div class="some_image">
</div>

CSS：

.some_image{
    width: 200px;
    height:100px; 
    background-image: url(../images/image.png);
}

Answer 1

单独使用HTML无法使背景图像可单击。它是元素的属性，而不是元素本身。只需将div包装在一个锚中。这在HTML5规范中是允许的。

<强> More info

当然，您可以简单地设置锚点样式：

.some_image {
    display: block;
    width: 200px;
    height:100px; 
    background-image: url(../images/image.png);
}

<a class="some_image" href=""></a>

Answer 2

传统上你不能这样做然而你可以通过hacky技术达到效果：

#heatSpot { 
    position: absolute;
    left: 20px; // over area of bg image
    top: 10px; // over area of bg image
    cursor: pointer;
}

然后只需在<a>标记中包含上面的元素 - 或使用jQuery / JavaScript来触发链接或尝试执行的任何操作。

使背景图像可点击

2 个答案: