Comment superposer des images (png) sur un site Web?

J'essaye de monter une image au milieu d'une autre (légèrement plus grande) image de sorte qu'elle semble être dans l'image plus grande (un téléphone dans ce cas). Je ne suis pas sûr de la bonne façon d'y arriver et toute aide est très appréciée!Comment superposer des images (png) sur un site Web?

Source

2011-09-02 Taylor

Vous devez définir la propriété 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; 
}

Voici une démo: http://jsfiddle.net/AlienWebguy/6VSBv/

Source

2011-09-02 22:52:28 AlienWebguy

Ah! Merci oh tellement, très simple! Restez génial! – Taylor

Une autre question rapide, désolé de mon ignorance oO, mais si le positionnement de png1 est centré via html, comme pas en haut à gauche comme dans l'exemple fourni, comment puis-je définir le positionnement de png2 par rapport à cela (Je pense que cela a du sens, sinon laissez-moi savoir!) Merci oh tellement! – Taylor

Peu importe, je pense que j'ai tout compris sur mon solitaire, merci encore! Et je l'ai vérifié! Meilleurs vœux! – Taylor

-1

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

Bien sûr, vous devrez ajuster les coordonnées, et je recommande vivement mettre le CSS dans une feuille de style au lieu d'inline. Voici un très bon tutoriel sur CSS pour plus d'informations: http://www.csstutorial.net/

Source

2011-09-02 22:55:24 someone

-1

Donc, vous êtes nouveau en HTML et CSS. Ce n'est pas un problème, mais votre question est un peu vague pour SO's general format.

Cependant, en un mot:

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

Un exemple concret: http://jsfiddle.net/cbn4L/

Bien sûr, est un exemple très simple. Et comme vous pouvez voir le conteneur interne n'est pas une image, mais le texte .. Techniquement, vous pouvez ajouter là une image maintenant .. mais comme nous vous facilitons dans le monde de HTML, alors ceci est un meilleur exemple et peut-être peut améliorer votre concept :)

Source

2011-09-02 22:57:03

Cela ne répond pas du tout à la question du PO. Vous ne superposez aucun PNG ici. – Maverick

@Matt Anderson: Eh bien, OP est évidemment un débutant .. donc si l'image extérieure est un téléphone, alors mon exemple est probablement quelque chose de similaire à son objectif plus élevé. Donc, techniquement, c'est un enseignement et une réponse alternative - en essayant de comprendre ce que OP veut vraiment faire. –

Comment superposer des images (png) sur un site Web?

Répondre

Questions connexes