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

Question

请耐心等待这一点，很难解释：

我有4个 -DIFFERENT SIZE - 图标： ，还有4个悬停效果：{{0 }}

经过无数次尝试失败后，我决定问：

如何以这样的方式/格式创建4个单独的精灵文件（1个文件=图标的正常+悬停版本），我可以使用相同的CSS类（具有相同的background-position）并且只是更改background-image使用元素上的inline-css（参见下面的HTML代码），同时保持定位？

例如：  background-position: 0 0;用于正常外观，然后在a:hover - background-position: 0 -45;用于每个图标对。

我尝试使用各种生成器，但我得到的是一个精灵的0 -45和另一个精灵的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

经过大量的试验和错误后想出来了。基本上，我将顶部图标2垂直像素放在png顶部，并在正常状态下使用background-position: 0 -2px。然后，将悬停版本放在例如50像素以下，第二张图片中已经有2个像素（基本上是48px），然后在background-position: 0 -50px上使用a:hover