css与精灵的图象修造 [英] css image building with sprites

问题描述

我想使用css sprites创建一个动态图标。这里是我一直得到的：

I'm trying to create a dynamic icon using css sprites. here's what I keep getting:

因此，我实际上有几个关于出错原因的问题：

So I actually have a couple of questions about what's going wrong:

1. 
   
2. 为什么紫色框之间有一个2像素的空间？

EDIT

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

Here is a jsFiddle: http://jsfiddle.net/hWhUb/

这里是相关的css i' m使用：

here's the relavant css i'm using:

.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>

任何人都可以向我解释我做错了什么，一个更好的方法（如果可能）？

can anyone explain to me what I'm doing wrong, and possibly how I could achieve my result in a better way (if possible)?

推荐答案

add float：left 到 .icon .brigade

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

这应该可以解决你需要的一切，或者让你在正确的地方完成关闭！

this should fix everything you need or get you in the right place to finish it off!

紫色框之间的间距是因为您使用 display：inline-block;

the spacing between the purple boxes is because you were using display: inline-block; and the white space in your markup between these divs, generates that spacing.

图标未显示在框上方，因为它缺少 top：0 ; 声明

the icon is not rendered "above" the boxes because it's missing the top: 0; declaration

这篇关于css与精灵的图象修造的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！