css图像建设与精灵

我想创建一个动态图标使用css精灵。这里就是我不断收到：css图像建设与精灵

enter image description here

所以我其实有什么地方出了错几个问题：

为什么图标（跨框）不重叠的紫色盒子？
为什么紫色的盒子之间有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>

任何人都可以向我解释我做错了什么，也可能如何以更好的方式实现我的结果（如果可能的话）？

来源

2012-10-20 LordZardeck

哪来的原始精灵不会呈现“上面”的盒子？如果你可以把所有的东西变成一个jsfiddle，这将会非常有用，谢谢！ – Luca

更新与小提琴链接 – LordZardeck

添加float: left到.icon .brigade

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

这应该可以解决你所需要的一切还是让你在正确的地方来完成它关闭！

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

图标，因为它缺少top: 0;声明

来源

2012-10-20 22:00:36 Luca

感谢您的帮助和解释！ – LordZardeck

完全没有问题，只要记住，问所有的信息和小提琴等需要的问题，是获得答案的最佳方式:) – Luca

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

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

直播：

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

来源

2012-10-20 21:59:56 sinanakyazici

css图像建设与精灵

回答

相关问题