このサイトはどのようにフラッシュ/フレックスで画像をレイヤーしていますか（これは通常のhtml/cssで行うことができます）

Question

私は最近asked this questionと私は非常に有益で有用な。

質問の私の主な部分の1つは、私は（フレックス一般的な議論対フラッシュに入った後、最後の質問に注力するように変更することが困難であったとして）それに注力したかったので、答えやったことがなかった

その質問の最初のサイトリンクでは、使用が選択すると、これらの選択が画像に適用され、選択されたすべてのアクセサリを含む「マスター」画像が構築されます。これは私が見るこれらの "人形を作る"ウェブサイトの多くに似ていますが、私の質問の中心に行く主な違いが1つあります。

例えば、ステップ3に、あなたは色を選択し、このような何かを得る：あなたは「アクセサリー」、の画像の変更を選択して、ステップ4に続い

をこの：

または

または

今、このサイトは、フラッシュ（またはフレックスなど）を使用している人々は、これはフラッシュ100％bysimplyイメージでのZIndexを使用して見ずに複製することができた私に言ってきたし、 jquery/cssしかし、上記の画像では、アクセサリーが元の画像（ケーキの背面にある星など）の後ろに部分的にあるため、これらの追加画像が上に重なり合っているようには見えません。だから、より洗練された何かが起こっているようです。私はどのようなチュートリアルや例でこの機能を示すWeb上の例を見つけることができないようです）

次の機能が通常のCSS、浮動小数点数などを使用している場合や、上記の画像に影響を与えるために画像をまとめて "マージ"できるこの機能を提供するためには、Flash/Flexの特定の機能を検討する必要があります。

Answer 1

星の画像が星のみのgif/pngの場合、Z-インデックスを使用するとトリックを行います。私が意味することを示すために小さなモックアップを作った。

そうしないと、ケーキのすべての状態でのCSSスプライトを作ることができ、ちょうどDIV内の画像の背景の位置を移動させます。私はあなたがする必要があると思う何

Answer 2

私は、この問題を処理する最も一般的な方法は、現実には前向きである一方、印象的な星をケーキの後ろに置くために、カットされた画像（ケーキの後ろにある星を切り取る）

後ろ

1. 星ケーキ
2. ケーキの前の星：

   別の可能性は、zインデックスを使用し、3枚の画像を使用することもあります。

私が今まで見てきたすべてのドレスゲームは、「カットされた画像」の方法を使用していました。 CSSを使用して何かをやろうとします。一旦やったら、ジャバスクリプトをやることはそれほど難しくないかもしれません。

Answer 3

は、次のカテゴリ

1. メインケーキの画像の中にあなたのイメージを打破です。
2. 背後にあるアクセサリー。
3. 前に入るアクセサリー。

ここで、各画像には独自のdivが必要です。たとえば、最後の1つでは、背後にある花は自分のイメージである必要があり、前の花は自分のイメージである必要があります。

次に、ケーキをz-インデックス2に、後ろの花をz-インデックス1に、そして花をz-インデックス3の前に設定します。絶対位置を使用して花を正しい位置に配置することをお勧めします。これらの画像が含まれるdivを相対位置に設定すると、アクセサリーの絶対的な配置は包含divの左上隅からの相対的なものになります。

以下は、HTMLとCSSの例です。

<div id="cake-container"> 
    <div id="main-cake"> 
    </div> 
    <div id="accessories-front"></div> 
    <div id="accessories-back"></div> 
</div> 


#cake-container { 
    position: relative; 
} 

#main-cake { 
    z-index: 2; 
} 

#accessories-front {z-index: 3} 
#accessories-back {z-index: 1}