1

スプライト法で作成した単一のpngに3つの画像があり、3番目の画像内にテーブルが必要です。

テーブルの位置を変更せずに、1 番目の画像 (maquina_bola) を 2 番目の画像 (maquina_vidro) の上に、2 番目の画像を 3 番目 (maquina_azul) の上に配置したいと考えています。

サンプルコードのように、個別の画像ファイルでそれを行うことができます。しかし、スプライト画像で同じコードを使用すると、画像は重なりません。

誰かが私を助けることができますか？

<div class="maquina maquina_azul">
                        <div class="maquina_vidro"></div>
                        <div class="maquina_bola"></div>
                        <div style="padding-top:250px; padding-left:20px;">

                        </div>
                    </div>

フィドル 1 - スプリント イメージ

そして、こうならなければならない

フィドル 2 - パーフェクト

4

2 に答える 2

2

どうぞ: http://jsfiddle.net/Yy3zZ/1/

1) 画像の順番が間違っていました。ボールはボウルの後ろにある必要があります。
2) 画像はオーバーラップする必要があるため、次のようpositionに設定する必要がありますabsolute
。 3) コンテナー ( _azul) をrelative配置する必要があります。 4) 次に、各画像のおよびプロパティ
を微調整して、正しい位置に配置する必要があります。lefttop

.maquina_azul{ 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -2px -4px;
    width: 290px; height: 710px;
    position:relative;
    margin-top:40px;
}

.maquina_bola{ 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -60px -768px;
    width: 176px; height: 176px;
    position:absolute; 
    left:60px; top:-35px;
}

    .maquina_vidro { 
    background: url('http://img823.imageshack.us/img823/7182/wpbl.png') no-repeat -378px -1610px;
    width: 224px; height: 110px;
    position:absolute; 
    left:35px; top: 43px; 
}
于 2013-10-02T19:23:09.820 に答える
0

画像をスプリントする最良の方法は次のとおりです。

Sprite Cow - スプライト シートの CSS を生成する

また、オフライン モードでも動作します ;)

于 2014-02-26T11:33:02.803 に答える