Jak mogę nakładać obrazy (png) na stronie internetowej?

Question

Próbuję zamontować obraz w środku innego (nieco większego) obrazu, aby wyglądał na większy obraz (w tym przypadku telefon). Nie jestem pewien, jak to zrobić, i każda pomoc jest doceniana!

Answer 1

Musisz ustawić właściwość css z-index.

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

Oto demo: 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"> 

Oczywiście, trzeba będzie dostosować współrzędne, a ja bardzo polecam umieszczanie CSS w arkuszu stylów zamiast w linii. Oto bardzo dobry samouczek dotyczący CSS, aby uzyskać więcej informacji: http://www.csstutorial.net/

Answer 3

Jesteś więc nowym użytkownikiem HTML i CSS. To nie problem, ale twoje pytanie jest trochę niejasne dla SO's general format.

Jednak w pigułce:

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

żywo przykład: http://jsfiddle.net/cbn4L/

To oczywiście jest bardzo prosty przykład. I jak widać, wewnętrzny pojemnik nie jest obrazem, ale tekstem. Technicznie możesz dodać do niego teraz obraz .. ale kiedy wprowadzamy Cię w świat HTML & CSS, to jest to lepszy przykład i może może poprawić Twoją koncepcję :)