Come faccio a posizionare un'immagine sopra l'altra in formato HTML?

Question

Sono un principiante alle guide di programmazione, si tenta di visualizzare molte immagini in una pagina.Alcune immagini sono di porre in cima gli altri.Per farla semplice, dire voglio un quadrato blu, con un quadrato rosso in alto a destra del quadrato blu (ma non stretto in un angolo).Sto cercando di evitare di compositing (con ImageMagick e simili) a causa di problemi di prestazioni.

Voglio solo la posizione di immagini che si sovrappongono l'uno rispetto all'altro.

Come più difficile esempio, immaginare un contachilometri inserito all'interno di una immagine più grande.Per sei cifre, avrei bisogno di un composito milioni di immagini diverse, o fare tutto al volo, dove tutto ciò che è necessario è quello di posizionare le sei immagini sopra l'altro.

Answer 1

Ok, dopo qualche tempo, ecco cosa ho fatto:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

La soluzione più semplice.Che è:

Creare un parente div che viene inserito nel flusso della pagina;posto l'immagine di base prima come relativa, in modo che il div sa quanto grande dovrebbe essere;posto le sovrapposizioni, come assolute rispetto all'angolo in alto a sinistra della prima immagine.Il trucco è quello di ottenere i parenti e assoluti corretto.

Answer 2

Questo è un barebone occhiata a quello che ho fatto per galleggiante di un'immagine su un'altra.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

Fonte

Answer 3

Ecco il codice che può dare idee:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

Ho il sospetto che Espo soluzione può essere scomodo, perché richiede il posizionamento di entrambe le immagini assolutamente.È opportuno che la prima posizione nel flusso.

Di solito, c'è un modo naturale per farlo è il CSS.Si mette in posizione:parente l'elemento contenitore, e quindi assolutamente da posizione i bambini all'interno di esso.Purtroppo, non è possibile inserire un'immagine all'interno di un altro.Ecco perché ho bisogno div contenitore.Notare che ho fatto un galleggiante per renderla adatta al suo contenuto.Il che rende la visualizzazione:inline-block teoricamente dovrebbe funzionare, ma il supporto del browser è scarsa c'.

EDIT:Ho eliminato taglia gli attributi di immagini per illustrare il mio punto migliore.Se si desidera che il contenitore di immagine per avere le sue dimensioni predefinite e non si conosce la dimensione in anticipo, è possibile utilizzare il sfondo trucco.Se lo fai, è un modo migliore per andare.

Answer 4

Un problema che ho notato, che potrebbe causare errori è che in rrichter risposta, il codice riportato di seguito:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

dovrebbe includere il px unità all'interno dello stile es.

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

Oltre a questo, la risposta ha funzionato bene.Grazie.

Answer 5

Si può assolutamente posizione pseudo elements rispetto al loro elemento padre.

Questo vi dà due livelli extra per giocare con per ogni elemento - così il posizionamento di un'immagine su un altro diventa facile con il minimo e il markup semantico (non vuoto div ecc).

markup:

<div class="overlap"></div>

css:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

Ecco un LIVE DEMO

Answer 6

Il modo più semplice per farlo è quello di utilizzare sfondo-immagine poi basta mettere <img> nell'elemento.

L'altro modo è usare i css livelli.C'è un sacco delle risorse disponibili per aiutare con questo, basta cercare livelli css.

Answer 7

Di stile in linea solo per chiarezza qui.Utilizzare un vero e proprio foglio di stile CSS.

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

Answer 8

@buti-oxa:Non per essere pedante, ma il tuo codice non è valido.HTML width e height gli attributi non consentono unità;è probabile che il pensiero di CSS width: e height: proprietà.Si dovrebbe anche fornire un tipo di contenuto (text/css;vedere Espo codice) con il <style> tag.

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

Lasciando px; nel width e height gli attributi potrebbe causare un motore di rendering per balk.

Answer 9

Può essere un po ' in ritardo, ma per questo si può fare:

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}