商品写真をカスタマイズする

Question

私はクライアントがカスタムトレーディングカードを提供するプロジェクトに取り組んでいます。私が抱えている問題は、ユーザーが特定のボックスに表示されている写真をアップロードできるようにカードテンプレートをオーバーレイすることができることです。

私はiframeメソッドを試しましたが、2つのdivを使用して、Z-インデックスを使用してオーバーレイしようとしましたが、2つの製品カスタマイザオプションを購入しましたが、どちらも実行しようとしていません。あなたの完全なコードを投稿することができれば、我々は、

JSFIDLE

NOW

Concept Example Photo

Answer 1

だけの例、単純なコードに：ここで

は私が必要なものの非常に基本的な画像ですあなたをさらに助けることができます。

<div class="one"> 
Template area 
</div> 
<div class="two"> 
Template area 
</div> 
<div class="three"> 
Template area 
</div> 

CSS: 
.one{ 
    position:relative 
    width:100%; 
    height:100px; 
    background:url('http://pokit.org/get/img/20c0eb36b19b3006b310f5834a9f818f.jpg') NO-REPEAT; 
} 

.two{ 
    width:250px; 
    height:50px; 
    background-color:blue; 
    position:absolute; 

} 
.three{ 
    margin-top:20px; 
    position:relative; 
    width:100%; 
    height:100px; 
    background:url('http://pokit.org/get/img/b90d68274639145e23102320e602afaa.jpg') no-repeat; 
}