ウェブサイト内にイメージ（png）をオーバーレイするにはどうすればよいですか？

Question

私は大きな画像（この場合は電話機）内に見えるように、画像を別の（少し大きめの）画像の中央にマウントしようとしています。私はこれを実現させるための適切な方法が不明であり、どんな助けも高く評価されています！

Answer 1

z-index cssプロパティを設定する必要があります。

HTML：

<img id="png1" src="png1.png" /> 
<img id="png2" src="png2.png" /> 

CSS：

#png1 { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

#png2 { 
    position:absolute; 
    /* 
    set top and left here 
    */ 
    z-index:1; 
} 

ここではデモです：もちろんhttp://jsfiddle.net/AlienWebguy/6VSBv/

Answer 2

<img style="position:absolute;left:10px;top:10px;" src="img1.png"> 
<img style="position:absolute;left:20px;top:20px;" src="img2.png"> 

、あなたは座標を調整する必要があります、と私は非常にお勧めですCSSをインラインではなくスタイルシートに置きます。 CSSの詳細については、こちらをご覧ください：http://www.csstutorial.net/

Answer 3

あなたはhtmlとCSSの初心者です。それは問題ありませんが、ご質問はSO's general formatの場合は少し曖昧です。一言で言えばしかし

、：

<style> 
    #phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;} 
    #display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;} 
</style> 
<div id="phone"> 
    <div id="display"> 
     Hello! What is up? Miley rocks! 
    </div> 
</div> 

ライブ例：もちろんhttp://jsfiddle.net/cbn4L/

これは非常に単純な例です。そして、あなたが見ることができるように、内側のコンテナはイメージではなく、テキストです。技術的にはイメージを追加することができます。しかし、HTML & CSSの世界にあなたをイージングしているので、これはもっと良い例です。あなたのコンセプトを高めることができます:)