Wie kann ich den overlay-Bilder (png) in eine website?

Ich versuche zu besteigen Sie ein Bild in der Mitte einer anderen (etwas größeren) Bild, so dass es scheint zu sein, innerhalb der größeren Bild (ein Telefon in diesem Fall). Ich bin nicht sicher, der richtige Weg, um dies geschehen zu lassen und jede Hilfe ist sehr willkommen!

InformationsquelleAutor Taylor | 2011-09-02
  1. 11

    Müssen Sie die z-index css-Eigenschaft.

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

    Hier ist eine demo: http://jsfiddle.net/AlienWebguy/6VSBv/

    • Ah! Danke, dass Sie ach so sehr, sehr straight forward! Bleiben genial!
    • Eine andere kurze Frage, sorry für meine Unwissenheit o.O, aber wenn die Positionierung der png1 ist zentriert über html -, als in nicht in das oben Links, wie in dem Beispiel, wie ich die Positionierung von png2 relativ zu ihm (ich denke, das macht Sinn, wenn nicht lass es mich wissen!) Danke, dass Sie ach so viel!
    • Nevermind, ich glaube, ich habe Sie alle auf meinem lonesome, vielen Dank nochmal! Und ich check würde es! Die besten Wünsche!
    InformationsquelleAutor AlienWebguy
  2. -1
    <img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">

    Natürlich, müssen Sie die Koordinaten, und ich würde empfehlen, setzen das CSS in ein stylesheet anstelle von inline. Hier ist ein gutes tutorial über CSS-für weitere Informationen: http://www.csstutorial.net/

    InformationsquelleAutor someone
  3. -1

    So Sie neu in html und CSS. Das ist kein problem, aber deine Frage ist ein wenig vage für SO ist das Allgemeine format.

    Jedoch in einem Punkt:

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

    Live-Beispiel: http://jsfiddle.net/cbn4L/

    Dies ist natürlich ein sehr einfaches Beispiel. Und wie Sie sehen, kann der innere Behälter ist kein Bild, sondern text.. Technisch kann man hinzufügen, dass es ein Bild jetzt.. aber wie wir sind, Lockerung Sie in die Welt von HTML & CSS, dann ist dies ein besseres Beispiel und vielleicht verbessern können Ihr Konzept 🙂

    • Dies beantwortet nicht die OP ' s Frage an alle. Sie sind nicht überlagern alle PNG ' s hier.
    • Anderson: Gut, OP ist offensichtlich ein Anfänger.. also, wenn das äußere Bild ist ein Telefon, dann mein Beispiel ist wahrscheinlich etwas ähnliches zu seinem höheren Ziel. Also technisch ist dies ein mehr von Lehr-und alternative Antworten -- versuche zu verstehen, was der OP wirklich will.
    InformationsquelleAutor
Schreibe einen Kommentar