HTML+CSS 悬停 Sprite ，不同大小的图标，一个背景位置 CSS

Question

请耐心等待，这很难解释:

我有 4 个 -DIFFERENT SIZE- 图标: 还有 4 个悬停效果:

经过无数次失败的尝试，我决定问:

我如何创建 4 个单独的 Sprite 文件(1 个文件 = 正常 + 图标的悬停版本)以这样的方式/格式我可以使用相同的 CSS 类(具有相同的 background-position) 并在保持定位的同时使用元素上的内联 css 更改 background-image(请参阅下面的 HTML 代码)？

例如: background-position: 0 0; 为正常看，然后在a:hover - background-position: 0 -45; 为每一个图标对。

我尝试使用各种生成器，但我得到的是一个 Sprite 的 0 -45 和另一个 Sprite 的 0 -37 等等。

也许有人真的可以用“正确的方式”生成它？

HTML:

<div class="menuPicHeader"> 
     <a href="#" style="background-image: url(sprite1.png);" class="">Text1</a>
     <a href="#" style="background-image: url(sprite2.png);" class="">Text2</a>
</div>

CSS:

.menuPicHeader a{   
        background-repeat: no-repeat;
        padding: 0 0 0 45px;
        height: 50px;
        background-position: 0 0;
    }

.menuPicHeader a:hover{
        background-position: ? ?;
    }

Answer 1

经过大量的反复试验，弄明白了。基本上，我将顶部图标放在距 png 顶部 2 个垂直像素的位置，并在正常状态下使用 background-position: 0 -2px。然后，将悬停版本例如放在下方 50 像素，第二张图片内已经有 2 像素(所以基本上是 48 像素)，然后在 a 上使用 background-position: 0 -50px:悬停