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

Question

Bear with me on this one, it's hard to explain:

I have 4 -DIFFERENT SIZE- icons: and another 4 for the hover effect:

After countless failed attempts, I decided to ask:

How do I create 4 seperate sprite files (1 file = normal + hover version of the icon) in such a way/format that I could use the same CSS class (with the same background-position ) and just change the background-image using inline-css on the element (See HTML code below ) while keeping the positioning?

For example: background-position: 0 0; for the normal look, and then on the a:hover - background-position: 0 -45; for every single icon pair.

I tried using various generators but what I get is like 0 -45 for one sprite and 0 -37 for another one etc.

Maybe someone could actually generate it the 'right way'?

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

Figured it out, after a LOT of trial and error. Basically, I put the top icon 2 vertical pixels off of the top of png, and use background-position: 0 -2px on the normal state. Then, put the hover version for example 50 pixels below, with 2 pixels already inside the second picture (so basically 48px), and then use background-position: 0 -50px on the a:hover