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.
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;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
Hier finden Sie einen Code, der Sie auf Ideen bringen kann:
<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][1]
Ich vermute, dass [Espo's Lösung] (https://stackoverflow.com/questions/48474#48484) unbequem sein kann, weil es erfordert, dass Sie beide Bilder absolut positionieren. Möglicherweise möchten Sie, dass das erste Bild sich selbst im Fluss positioniert.
Normalerweise gibt es eine natürliche Möglichkeit, das mit CSS zu tun. Sie setzen position: relative auf das Container-Element und positionieren dann die Kinder darin absolut. Leider kann man ein Bild nicht innerhalb eines anderen platzieren. Deshalb brauchte ich container div. Beachten Sie, dass ich es zu einem float-Element gemacht habe, damit es sich automatisch an seinen Inhalt anpasst. Mit display: inline-block sollte es theoretisch auch funktionieren, aber die Browserunterstützung ist hier schlecht.
EDIT: Ich habe die Größenattribute aus den Bildern entfernt, um meinen Standpunkt besser zu verdeutlichen. Wenn Sie wollen, dass das Containerbild seine Standardgrößen hat und Sie die Größe nicht vorher kennen, können Sie den background trick nicht verwenden. Wenn Sie ihn kennen, ist er die bessere Lösung.
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.