css - 使用 sprite 构建 css 图像

Question

我正在尝试使用 css sprites 创建一个动态图标。这是我不断得到的：

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

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

你应该使用这个。它必须包含顶部。

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

居住 ：

http://jsfiddle.net/hWhUb/1/

Answer 2

添加float: left到.icon .brigade

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

这应该可以解决您需要的所有问题，或者让您在正确的地方完成它！

紫色框之间的间距是因为您正在使用display: inline-block;这些 div 之间的标记中的空白空间，生成该间距。

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