Hoe plaats ik de ene afbeelding op de andere in HTML?

Ik ben een beginner in het programmeren van rails en probeer veel afbeeldingen op een pagina weer te geven. Sommige afbeeldingen moeten op andere worden gelegd. Om het eenvoudig te maken, zeg 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 (met ImageMagick en dergelijke) te vermijden vanwege prestatieproblemen.

Ik wil alleen overlappende afbeeldingen relatief ten opzichte van elkaar plaatsen.

Als een moeilijker voorbeeld, stel je een kilometerteller voor die in een grotere afbeelding is geplaatst. Voor zes cijfers zou ik een miljoen verschillende afbeeldingen moeten samenstellen, of het allemaal on-the-fly doen, waarbij ik alleen de zes afbeeldingen op de andere hoef te plaatsen.


Antwoord 1, autoriteit 100%

Ok, na een tijdje kwam ik hier terecht:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}
<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

Antwoord 2, autoriteit 16%

Dit is een barebones van wat ik heb gedaan om de ene afbeelding over de andere te laten zweven.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}
<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">

Antwoord 3, autoriteit 9%

Hier is code die u op ideeën kan brengen:

<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="https://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

Ik vermoed dat Espo’s oplossingonhandig kan zijn omdat je beide afbeeldingen absoluut moet positioneren. Misschien wil je dat de eerste zichzelf in de stroom positioneert.

Meestal is er een natuurlijke manier om dat te doen met CSS. U plaatst position: relative op het containerelement en plaatst vervolgens absoluut kinderen erin. Helaas kunt u de ene afbeelding niet in de andere plaatsen. Daarom had ik container div nodig. Merk op dat ik er een float van heb gemaakt om het automatisch aan de inhoud aan te passen. Het weergeven: inline-block zou theoretisch ook moeten werken, maar de browserondersteuning is daar slecht.

EDIT: i Verwijderde grootteattributen van de afbeeldingen om mijn punt beter te illustreren. Als u de containerafbeelding wilt hebben om de standaardformaten te hebben en u niet van tevoren de grootte kent, kunt u de achtergrondtruc . Als je dat doet, is het een betere manier om te gaan.


Antwoord 4, Autoriteit 2%

Een probleem dat ik heb gemerkt dat dit fouten zou kunnen veroorzaken, is dat in het antwoord van RRichtter, de onderstaande code:

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

moet de PX-eenheden binnen de stijl bevatten, bijvoorbeeld.

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

anders dan dat, het antwoord werkte prima. Bedankt.


Antwoord 5, Autoriteit 2%

U kunt absoluut positioneren pseudo elementsten opzichte van hun ouderelement.

Dit geeft je twee extra lagen om mee te spelen voor elk element – dus positionering van één afbeelding bovenop een ander wordt eenvoudig – met minimale en semantische markup (geen lege divs enz.)

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

Hier is een live demo


Antwoord 6

Alleen inline-stijl hier voor de duidelijkheid. Gebruik een echte CSS-stylesheet.

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

Antwoord 7

Het kan een beetje laat zijn, maar hiervoor kun je het volgende doen:

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

Antwoord 8

De gemakkelijke manier om het te doen, is om achtergrondafbeelding te gebruiken, dan zet gewoon een & lt; img & gt; in dat element.

De andere manier om te doen is het gebruik van CSS-lagen. Er is een ton een middelen beschikbaar om u hierbij te helpen, zoek gewoon naar CSS lagen .


Antwoord 9

Set Achtergrondformaat Cover. Wikkel dan je div met een andere div nu Max-breedte op ouder Div.

<div style="max-width:100px">
  <div style="background-image:url('/image.png'); background-size: cover; height:100px; width:100px; "></div>
</div>

Antwoord 10

@ buti-oxa: niet om Pedantic te zijn, maar je code is ongeldig. De HTML widthen heightATTIBUTEN WORDT NIET VOOR EEN AUTOMEN; Je denkt waarschijnlijk aan de CSS width:en height:Eigenschappen. U dient ook een inhoudstype (text/csste verstrekken; Zie ESPO’s code) met de <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="https://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="https://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

Verlaten px;in de widthen heightAttributes kan een renderingsmotor veroorzaken om te balken.


Antwoord 11

Maak een relatieve div die in de stroom van de pagina wordt geplaatst; plaats de basisafbeelding eerst als relatief zodat de div weet hoe groot deze moet zijn; plaats de overlays als absolute waarden ten opzichte van de linkerbovenhoek van de eerste afbeelding. De truc is om de verwanten en absolute waarden correct te krijgen.

Other episodes