Jak ustawić jeden obraz na drugim w HTML?

Jestem początkującym w programowaniu szyn, próbuję wyświetlić wiele obrazów na stronie. Niektóre obrazy mają się nakładać na inne. Upraszczając, powiedz, że chcę niebieski kwadrat z czerwonym kwadratem w prawym górnym rogu niebieskiego kwadratu (ale nie za ciasno w rogu). Staram się unikać komponowania (z ImageMagick i podobnymi) z powodu problemów z wydajnością.

Chcę tylko ustawić nakładające się obrazy względem siebie.

Jako trudniejszy przykład, wyobraź sobie przebieg umieszczony wewnątrz większego obrazu. W przypadku sześciu cyfr musiałbym skomponować milion różnych obrazów lub zrobić to wszystko w locie, gdzie wszystko, czego potrzeba, to umieścić sześć zdjęć na drugim.

Ok, po jakimś czasie wylądowałem:

.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://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

Jako najprostsze rozwiązanie. To jest:

Utwórz względny div, który zostanie umieszczony w przepływie strony; umieść obraz podstawowy jako względny, aby div wiedział, jak duży powinien być; umieść nakładki jako absolutne względem lewego górnego rogu pierwszego obrazu. Sztuką jest poprawienie krewnych i absolutów.

Oto krótkie spojrzenie na to, co zrobiłem, aby umieścić jeden obraz nad drugim.

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

Źródło

Oto kod, który może dać ci pomysły:

<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

Podejrzewam, że rozwiązanie Espo może być niewygodne, ponieważ wymaga bezwzględnego ustawienia obu obrazów. Możesz chcieć, aby pierwszy ustawił się w przepływie.

Zwykle istnieje naturalny sposób, aby to zrobić, CSS. Umieszczasz pozycję: krewny na elemencie kontenera, a następnie absolutnie umieszczasz w nim dzieci. Niestety nie możesz umieścić jednego obrazu w drugim. Dlatego potrzebowałem div kontenera. Zauważ, że uczyniłem go zmiennoprzecinkowym, aby automatycznie dopasowywał się do zawartości. Wyświetlanie go: blok inline powinien teoretycznie również działać, ale obsługa przeglądarki jest tam słaba.

EDYCJA: Usunąłem atrybuty rozmiaru z obrazów, aby lepiej zilustrować mój punkt widzenia. Jeśli chcesz, aby obraz kontenera miał domyślne rozmiary i nie znasz wcześniej rozmiaru, nie możesz użyć sztuczki w tle . Jeśli to zrobisz, jest to lepszy sposób.

Zauważyłem, że jednym z problemów, który może powodować błędy, jest w odpowiedzi Richarda poniższy kod:

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

powinny zawierać jednostki px w stylu np.

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

Poza tym odpowiedź działała dobrze. Dzięki.

Możesz bezwzględnie pozycjonować pseudo elementswzględem ich elementu nadrzędnego.

Daje to dwie dodatkowe warstwy do zabawy dla każdego elementu - dzięki temu umieszczanie jednego obrazu nad drugim staje się łatwe - z minimalnym i semantycznym znacznikiem (bez pustych div itp.).

narzut:

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

Oto LIVE DEMO

Najłatwiejszym sposobem na to jest użycie obrazu tła, a następnie umieszczenie <img> w tym elemencie.

Innym sposobem jest użycie warstw css. Istnieje mnóstwo zasobów, które mogą ci w tym pomóc, po prostu wyszukaj warstwy css .

Styl wbudowany tylko dla przejrzystości. Użyj prawdziwego arkusza stylów 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>

Może być trochę późno, ale możesz to zrobić:

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

@ buti-oxa: Nie bądź pedantyczny, ale twój kod jest nieprawidłowy. HTML widthi heightatrybuty nie pozwalają na jednostki; prawdopodobnie myślisz o CSS width:i height:właściwościach. Powinieneś także podać typ zawartości ( text/csspatrz kod Espo) wraz ze <style>znacznikiem.

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

Pozostawiając px;w widthi heightatrybutów może spowodować silnik renderowania Balk.

Utwórz względny div, który zostanie umieszczony w przepływie strony; umieść obraz podstawowy jako względny, aby div wiedział, jak duży powinien być; umieść nakładki jako absolutne względem lewego górnego rogu pierwszego obrazu. Sztuką jest poprawienie krewnych i absolutów.