Wie positioniere ich ein Bild über einem anderen in HTML?

Ich bin ein Anfänger in der Rails-Programmierung und versuche, viele Bilder auf einer Seite anzuzeigen. Einige Bilder sind auf andere zu legen. Um es einfach zu machen, sagen wir, ich will ein blaues Quadrat, mit einem roten Quadrat in der oberen rechten Ecke des blauen Quadrats (aber nicht eng in der Ecke). Ich versuche, Compositing (mit ImageMagick und ähnlichem) aufgrund von Leistungsproblemen zu vermeiden.

Ich möchte nur überlappende Bilder relativ zueinander positionieren.

Als schwierigeres Beispiel stelle ich mir einen Kilometerzähler vor, der in einem größeren Bild platziert ist. Für sechs Ziffern müsste ich eine Million verschiedener Bilder zusammensetzen oder das Ganze "on the fly" machen, wobei alles, was nötig ist, darin besteht, die sechs Bilder übereinander zu legen.

computingfreak
Bearbeitete Frage 19. September 2016 в 10:49
Programmierung
graphics html css optimization
7. September 2008 в 2:31
17 Aufrufe

Dies ist ein einfacher Blick darauf, was ich getan habe, um ein Bild über ein anderes zu legen.

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

Quelle

Nhan
Bearbeitete Antwort 2. Dezember 2016 в 11:56
Kommentare (1)

Hier finden Sie einen Code, der Sie auf Ideen bringen kann:



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


<div class="containerdiv">
Community
Bearbeitete Antwort 23. Mai 2017 в 11:47
Kommentare (1)

Am einfachsten ist es, background-image zu verwenden und dann einfach ein in dieses Element einzufügen.

Die andere Möglichkeit ist die Verwendung von css-Ebenen. Es gibt eine Menge Ressourcen zur Verfügung, um Ihnen dabei zu helfen, suchen Sie einfach nach css layers.

Kommentare (0)