CSS Sprite 没有正确加载 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 不知道背景图像是 Sprite ；它只是像任何其他背景图像一样显示背景图像。在您的例子中，图标在图像上紧挨着，因此它们作为一个整体显示。您不能使用 css 仅裁剪背景图像的一部分，因此您要么需要在 sprite 中包含足够的填充以说明元素的大小(棘手，因为您可能想在更大的元素上使用图标，这是一个未知)，或者在你的标记中包含适合图标的精确大小的额外元素，然后将图标 Sprite 添加到它们(更简单，但额外的标记很糟糕)。

这是一个代码示例，我删除了一些无关的 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/