0

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

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

同样的结果...

我究竟做错了什么 ？

编辑

这是我的 jsFiddle：

http://jsfiddle.net/HKaSw/

4

3 回答 3

1

您必须这样想：您将背景图像应用于一个非常大的元素。您的 CSS 不知道背景图像是精灵；它只是像任何其他背景图像一样显示背景图像。在您的情况下，图标在图像上彼此相邻，因此它们会作为一个整体显示。您不能使用 css 仅裁剪背景图像的一部分，因此您需要在精灵中包含足够的填充以考虑元素的大小（这很棘手，因为您可能希望在更大的元素上使用图标，这是一个未知），或者在您的标记中包含适合图标确切大小的额外元素，然后将图标精灵添加到它们（更简单，但额外的标记很烂）。

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

于 2013-05-02T21:44:07.167 回答
0

尝试将 :hover 放在标签上<a>而不是<li>

于 2013-05-02T21:18:21.490 回答
0

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

于 2020-02-23T10:54:44.420 回答