イメージをイメージに置くには？

Question

私は1つのdivとdivが <div><img src='img1.png'/></div>のようなimgタグを持っていると仮定します。そうすれば、ページが実行されるときにimg1.pngがdiv内で読み込まれます。私はちょうど私がimg1.pngのどんなビジーな画像のようにでも中央に別の小さなイメージを置くことができるか知る必要があります。どのようなjqueryやCSSを使用して好きなことを行うための最良の方法だろう。中央のdivに小さな画像を配置するために私にCSSまたはjqueryを与えてください。

divに背景画像がCSSで設定されている場合、背景画像のダウンロードが完了したかどうか、またはjqueryを使用していないと判断できますか？可能であれば、私にサンプルコードを示してください。おかげ

Answer 1

使用、それを試してみて、返信 ...画像がターゲット要素の子孫要素である必要があります配置するには

$("#divID img").each(function() { 
    var $overlay = $('<div></div>'); 
    $overlay.css({ 
     position: "relative", 
     display: "inline-block", 
     width: $(this).width(), 
     height: $(this).height(), 
     backgroundPosition: "center center", 
     backgroundImage: "url(loading-image.gif)" 
    }); 
    $(this).wrap($overlay); 
}); 

Answer 2

はDIVの背景として第一の画像を保持：

<div style="background: url('img1.png')"> 
<img src="img2.png" style="margin 0 auto" /> 
</div> 

これは、（水平方向にのみなく）第2の画像を中心に説明します。 marginとtop属性（absoluteまたはrelativeの位置指定を使用する場合）を使用して、少しでも手間をかけなければならない場合があります。しかし、それが別のイメージの1つのイメージだけであれば、マージン・トップでちょっと手を加えることができます。

Answer 3

$("#imageToPlaceDivID").position({ 
    my: "center center", 
    at: "center center", 
    of: "#IDOfTargetElementWhereYouWantToPlace" 
}); 

...画像の上に別のdivを追加してラップします。

Answer 4

CSS3は、複数の背景レイヤーをサポートしています。 http://www.css3.info/preview/multiple-backgrounds/

#example1 { 
    width: 500px; 
    height: 250px; 
    background-image: url(sheep.png), url(betweengrassandsky.png); 
    background-position: center bottom, left top; 
    background-repeat: no-repeat; 
}