HTML+CSS 一个位置类，用于不同大小的图标精灵答案

【问题标题】：HTML+CSS One position class for different size icon spritesHTML+CSS 一个位置类，用于不同大小的图标精灵
【发布时间】：2014-06-25 03:13:38
【问题描述】：

尝试制作一个带有在悬停时改变颜色的图标的菜单。关键是：在每个菜单图标上都有 inline-css 来更改精灵文件，例如：<a href="#" style="background-image: url(menuSprites/smartphone.png);" class="">Contact</a> 和 CSS - 只有一个类：

.menuPicHeader a{   
        background-repeat: no-repeat;
        display: inline-block;
        height: 50px;
        background-position: X X;
    }

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

问题 - 每个图标对（每个精灵 2 个图标，1 个正常 1 个悬停）大小不同。因此，如果我预先设置了一些背景位置偏移，由于尺寸不同，它显然不起作用。是否有一些工具/简单的方法可以制作可以使用相同偏移量的精灵？这是我用来测试它的，用一个使用 50 像素垂直间隙的生成器制作的：

（手机和球 - 不同的尺寸）

文件 1：

文件2：

附：我使用的生成器：http://www.cssportal.com/css-sprite-generator/

【问题讨论】：

标签： html css hover position sprite

【解决方案1】：

要么使每个图像的图像大小相同（更好），要么为个人设置特殊属性。

【讨论】：

我让两个文件大小一样，把两个图标放在同一个角等距离，还是不对齐。
你不希望它们在角落里。你希望他们在中心。