如何在div的背景图像上获取锚标记?

时间:2013-04-10 21:25:48

标签: html css anchor sprite

HTML:

<div id="facey">
    <a href="http://www.facebook.com.au"></a>
</div>

的CSS:

#facey {
    float: left;
    width: 32px;
    height: 32px;
    background: url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

#facey:hover {
    background-position: 0 -32px;
}

我有社交媒体图标的CSS精灵,我一直试图在它们上面放置一个锚标签到各自的网站,我不知道它是如何工作的,因为精灵图像被用作背景图像和在div中,锚标签似乎对我不起作用?我不确定我在这里做错了什么?

3 个答案:

答案 0 :(得分:8)

CSS 样式display:block;添加到#facey a

答案 1 :(得分:2)

将背景放在锚点而不是div上,它是最终可点击的锚标记。 div在这里实际上是多余的。

<a href="http://www.facebook.com.au" id="facey"></a>

a#facey {
  float: left;
  width:32px;
  height: 32px;
  display: block;
  background:url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

a#facey:hover {
  background-position:0 -32px;
}

答案 2 :(得分:0)

您不能像这样从文件系统引用文件,它被认为是IE以外的任何浏览器中的安全漏洞。请尝试使用相对路径:

#facey {
    float: left;
    width:32px;
    height: 32px;
    background:url(icons/facey%20sprite.png) no-repeat 0 0;
    }