CSS Sprite无法正确加载精灵

Question

我正在尝试为正在构建的菜单加载一张Spritesheet，但不是一次显示一张图像，而是在元素中的不同位置显示了整个Spritesheet。

这是我的CSS代码，使用两个图像：

#mymenu ul.menu > li > a.haschild
{
    background: #000 url("../images/right.png") no-repeat right center;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000 url("../images/right-hover.png") no-repeat right center;
    }

这是我尝试使用的Spritesheet：

#mymenu ul.menu > li > a.haschild
{
    background: #000 url("../images/spritesheet.png") 0px 0px no-repeat right center;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000 url("../images/spritesheet.png") -6px 0px no-repeat right center;
    }

但是它同时显示两个图像（整个Spritesheet）

我也尝试过：

#mymenu ul.menu > li > a.haschild
{
    background: #000;
    background-image: url("../images/spritesheet.png") 0px 0px no-repeat right center;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000;
            background-image: url("../images/spritesheet.png") -6px 0px no-repeat right center;
    }

相同结果...

我在做什么错？

编辑

这是我的jsFiddle：

http://jsfiddle.net/HKaSw/

Answer 1

您必须这样思考：您正在将背景图片应用于非常大的元素。您的CSS不知道背景图片是精灵。它只显示背景图像，就像其他任何背景图像一样。而且，在您的情况下，图标在图像上[，因此它们将整体显示。您不能使用css裁剪背景图像的一部分，因此您要么需要在sprite中包含足够的填充，以考虑元素的大小（有些微，因为您可能想在更大的元素上使用图标，未知），或在您的标记中添加适合图标exact大小的额外元素，然后向其添加图标精灵（更加安全，但额外的标记很烂）。

这是代码示例，我删除了一些多余的CSS（我敢肯定它可以进一步优化，但是我们只是在这里处理图标）。您无需在父菜单项和子菜单项上都定义图标类；您可以重新使用图标类。这就是CSS的重点！

a.haschild i {
  background: #000 url("http://www.grouctivity.com/menu/sprites.png") no-repeat 0 0;
}

a.haschild:hover i {
  background-position: -6px 0;
}

这里是一个jsFiddle，带有一个额外的图标元素的演示：http://jsfiddle.net/HKaSw/2/

Answer 2

尝试：将鼠标悬停在标签<a>而不是<li>上>

Answer 3

http://www.spritecow.com/您可以使用此URL查找精灵图标的正确位置，有时位置不准确，但是通过最小调整可以得到正确的位置。然后在background-position：属性中粘贴位置值。你会得到结果。