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仅裁剪背景图像的一部分，因此您需要在精灵中包含足够的填充以考虑元素的大小（棘手，因为您可能希望在更大的元素上使用图标，这是一个未知），或在标记中包含适合图标的精确大小的额外元素，然后将图标精灵添加到它们（更加万无一失，但额外的标记很糟糕）。

以下是代码示例，我删除了一些无关的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;
}

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

Answer 2

尝试放置：将鼠标悬停在代码<a>上，而不是<li>

Answer 3

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

CSS Sprite没有正确加载sprite

3 个答案: