Bir web sitesindeki görüntüleri (png) nasıl kaplayabilirim?

Question

Ben büyük resim (bu durumda bir telefon) içinde olması görünecek şekilde başka (biraz daha büyük) görüntünün ortasında bir görüntü montaj çalışıyorum. Bunu yapmak için uygun yoldan emin değilim ve herhangi bir yardım çok takdir edilmektedir!

Answer 1

Sen z-index css özelliğini ayarlamanız gerekir.

HTML:

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

CSS: Burada

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

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

bir demo: Elbette 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"> 

, sen koordinatlarını ayarlamak gerekir ve son derece tavsiye ederim CSS'yi satır içi yerine bir stil sayfasına koyma. İşte fazla bilgi için CSS üzerinde oldukça iyi bir öğretici var:

Answer 3

http://www.csstutorial.net/ Yani html ve CSS için yenidir. Sorun değil, ama sorunuz SO's general format için biraz belirsiz. Özetle Ancak

:

<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> 

Canlı örnek: http://jsfiddle.net/cbn4L/

Bu tabii bir derece basit bir örnektir. Ve iç kabın görebildiğiniz gibi bir resim değil, metin .. Teknik olarak şimdi bir görüntü ekleyebilirsiniz .. ama biz HTML & CSS dünyasına girerken, bu daha iyi bir örnek ve belki de konseptinizi :)