Hoe plaats ik een afbeelding boven op een andere in HTML?

Ik'ben een beginner in rails programmeren, en probeer veel afbeeldingen op een pagina te tonen. Sommige afbeeldingen moeten boven op andere liggen. Om het eenvoudig te maken, stel ik wil een blauw vierkant, met een rood vierkant in de rechterbovenhoek van het blauwe vierkant (maar niet strak in de hoek). Ik probeer compositing te vermijden (met ImageMagick en dergelijke) vanwege performance problemen.

Ik wil alleen overlappende afbeeldingen ten opzichte van elkaar positioneren.

Als een moeilijker voorbeeld, stel je een kilometerteller voor geplaatst in een grotere afbeelding. Voor zes cijfers zou ik een miljoen verschillende beelden moeten samenstellen, of het allemaal "on the fly" doen, waarbij alles wat nodig is de zes beelden bovenop de andere te plaatsen.

computingfreak
Bewerkte vraag 19de0 september 2016 в 10:49
Programmering
graphics html css optimization
7de6 september 2008 в 2:31
27 views

Dit is een kale blik op wat ik gedaan heb om het ene beeld boven het andere te laten zweven.

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

Bron

Nhan
Bewerkt antwoord 2de4 december 2016 в 11:56
Commentaren (1)

Hier's code die u op ideeën kan brengen:



.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 


<div class="containerdiv">
Community
Bewerkt antwoord 23ste1 mei 2017 в 11:47
Commentaren (1)

De gemakkelijke manier om het te doen is om background-image te gebruiken en dan gewoon een in dat element te zetten.

De andere manier is om css layers te gebruiken. Er zijn veel bronnen beschikbaar om je hiermee te helpen, zoek maar eens op css layers.

Commentaren (0)