链接背景中的图像的特定部分

Question

我有一个背景图像[通过CSS]，我想链接该图像的特定部分，就像它说＆＃34; Home＆＃34;我想把它指向我网站的家。

我认为图像映射仅适用于普通图像，我无法找到使用背景图像的方法[实际上我还没有尝试过。]

那么有人可以告诉我该怎么做吗？

谢谢：）

Answer 1

1. 在背景图片上使用1px透明png
2. 将png的大小设置为您要制作的背景或链接的大小
3. 现在你可以直接链接那个透明的png，或者映射它

如果您在空间中安装png时遇到困难，请将其浮动或使用位置：相对于将覆盖的透明图像放到您需要的位置。

Answer 2

让我们说

HTML

<div>
<a href="#home"></a>
</div>

CSS

div
{
width: 100px; /*the same width of the background image*/
height: 100px; /*the same height of the background image*/
background-image: url("#image");
position: relative;
}

div>a
{
position: absolute;
top: 10px /*the distance of the "home" part of the image from the top*/
left: 20px /*the distance of the "home" part of the image from left*/
width: 10px /*the width of the "home" part of the image*/
height: 5px /*the height of the "home" part of the image*/
display: block;
}

div>a:hover
{
outline: 1px solid black;
}