0

CSSスプライトを使用して動的アイコンを作成しようとしています。ここに私が得続けているものがあります:

ここに画像の説明を入力

だから私は実際に何がうまくいかないのかについていくつか質問があります：

  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>

誰かが私が間違っていることを説明できますか?また、可能であれば、より良い方法で結果を達成するにはどうすればよいでしょうか?

4

2 に答える 2

1

これを使うべきです。トップが含まれている必要があります。

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

ライブ ：

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

于 2012-10-20T21:59:56.020 に答える
1

float: leftに追加.icon .brigade

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

これにより、必要なすべてが修正されるか、適切な場所に移動して終了するはずです!

紫色のボックス間の間隔は、使用display: inline-block;していたためであり、これらの div 間のマークアップの空白がその間隔を生成します。

top: 0;宣言がないため、アイコンはボックスの「上」にレンダリングされません

于 2012-10-20T22:00:36.483 に答える