4

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 中似乎对我不起作用？我不确定我在这里做错了什么？

4

3 回答 3

9

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

于 2013-04-10T21:27:37.370 回答
3

把背景放在anchor上而不是放在div上，最后是可以点击的anchor标签。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;
}
于 2013-04-10T21:27:19.557 回答
0

您不能像那样从文件系统中引用文件，这在 IE 以外的任何浏览器中都被认为是一个安全漏洞。尝试使用相对路径：

#facey {
    float: left;
    width:32px;
    height: 32px;
    background:url(icons/facey%20sprite.png) no-repeat 0 0;
    }
于 2013-04-10T23:56:50.730 回答