CSS精灵未正确加载精灵

我试图为我正在构建的菜单加载一个精灵表，但它不是一次显示一个图像，而是在元素中的不同位置显示整个精灵表

这是我使用两个图像的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;
    }

这就是我尝试使用的精灵表：

#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;
    }

但它同时显示两个图像（整个精灵表）

我也试过：

#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;
    }

同样的结果

我做错了什么

编辑

这是我的JSFIDLE：

---

尝试放置：将鼠标悬停在标签

上，而不是

您必须这样想：将背景图像应用到一个相当大的元素上。你的CSS不知道背景图像是精灵；它只是像其他背景图像一样显示背景图像。在您的例子中，图标在图像上紧挨着，所以它们作为一个整体显示。您不能使用css仅裁剪背景图像的一部分，因此您需要在精灵中包含足够的填充以说明元素的大小（这很棘手，因为您可能希望在更大的元素上使用图标，这是未知的），或者在标记中包含与图标的确切大小相匹配的额外元素，然后向它们添加图标精灵（更简单，但额外的标记很糟糕）

这是一个代码示例，我删除了一些无关的CSS（我相信它可以进一步优化，但我们只是在处理图标）。您不需要在父菜单项和子菜单项上定义图标类；您可以重复使用icon类。这就是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;
}

下面是一个带有额外图标元素演示的JSFIDLE:

您可以使用此URL查找精灵图标的正确位置， 有时位置不准确，但通过最小调整，您可以获得正确的位置。 然后在背景位置：属性粘贴位置值。

---

你会得到结果。

你能做一个jsfiddle吗？我编辑了答案，将jsfiddle

right

和

center

作为背景定位的关键字。你不需要单位和对齐。嗨，克里斯蒂安，谢谢你看！这正是我需要的