使用 sprite 构建 css 图像

Question

我正在尝试使用 CSS Sprite 创建动态图标。这是我不断得到的:

所以我实际上有几个关于出了什么问题的问题:

1. 为什么图标(带十字的框)没有与紫色框重叠？
2. 为什么紫色框之间有 2px 的间距？

编辑

这是一个 jsFiddle:http://jsfiddle.net/hWhUb/

这是我正在使用的相关 CSS:

.icon {
    position: relative;
    width: 87px;
}

.icon .icon-type {
    position: absolute;
    left: 0;
}

.icon .brigade, .icon .icon-type {
    background-image: url('img/play/splitbrigades.png');
}

.icon-hero {
    width: 87px;
    height: 71px;
    background-position: -11px -11px;
    background-repeat: no-repeat;
}

.brigade-purple-left {
    width: 27px;
    height: 71px;
    background-position: -287px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

.brigade-purple-middle {
    width: 30px;
    height: 71px;
    background-position: -334px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

.brigade-purple-right {
    width: 28px;
    height: 71px;
    background-position: -384px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

和 html:

<div class="icon">
    <div class="brigade brigade-purple-left">&nbsp;</div>
    <div class="brigade brigade-purple-middle" style="width: 22px;">&nbsp;</div>
    <div class="brigade brigade-purple-right">&nbsp;</div>
    <div class="icon-type icon-hero">&nbsp;</div>
</div>

谁能向我解释我做错了什么，以及我如何以更好的方式(如果可能)实现我的结果？

Answer 1

将 float: left 添加到 .icon .brigade

.icon .brigade {
    float: left;
    margin: 0;
}

这应该可以解决您需要的一切，或者让您在正确的地方完成它!

紫色框之间的间距是因为您使用了 display: inline-block; 并且这些 div 之间的标记中的空白产生了该间距。

图标没有呈现在框的“上方”，因为它缺少 top: 0; 声明