Sprite 导航图像的 HTML 和 CSS 标记

Question

问题

我正在尝试获得一种效果，我可以在左侧菜单中的导航链接旁边放置图像，所有这些图像都来自单个 sprite 图像。我不确定我应该如何创建我的标记才能正确执行此操作。我希望整个图像和文本都可以点击，以便转到 URL。

可能的解决方案

• 将图片标签放在 ahref 链接的左侧，并将其链接到同一位置。
• 在 ahref 链接上使用带边距的背景图片为其腾出空间
• 使用跨度标签

代码

http://jsfiddle.net/spadez/Z2qE5/

<ul id="sidenav">
    <li><a href="#" title="Home" class="active">Dashboard</a></li>
    <li><a href="#" title="Home">Dashboard</a></li>
    <li><a href="#" title="Home">Dashboard</a></li>
    <li><a href="#" title="Home">Dashboard</a></li>
    <li><a href="#" title="Home">Account</a></li>
</ul> 

Answer 1

我认为http://www.w3.org/wiki/CSS_background_images#Sprites回答你的问题。

他们在 <li> tag 中使用 id然后

#rss span{ background-position: -15px 0;}

#photos span{background-position: -30px 0;}

#links span{background-position: -45px 0;}