Как разместить одно изображение поверх другого в HTML?

Я начинаю программировать на рельсах, пытаясь показать много изображений на странице. Некоторые изображения должны лежать поверх других. Чтобы сделать его простым, скажем, я хочу синий квадрат с красным квадратом в правом верхнем углу синего квадрата (но не затянутым в углу). Я стараюсь избегать компоновки (с ImageMagick и т.п.) из-за проблем с производительностью.

Я просто хочу позиционировать перекрывающиеся изображения относительно друг друга.

Как более сложный пример, представьте одометр, помещенный внутри большего изображения. Для шести цифр мне нужно было собрать миллион разных изображений или сделать все это "на лету", где все, что нужно, - разместить шесть изображений поверх другого.

ОТВЕТЫ

Ответ 1

Хорошо, через какое-то время здесь я приземлился:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}
<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

Ответ 2

Это бабообразный взгляд на то, что я сделал, чтобы поместить одно изображение поверх другого.

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

Ответ 3

Вот код, который может дать вам идеи:

<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

Я подозреваю, что Espo Solution может быть неудобным, потому что он требует, чтобы вы разместили оба изображения абсолютно. Возможно, вы захотите, чтобы первый позиционировал себя в потоке.

Обычно есть естественный способ сделать это - CSS. Вы помещаете position: относительный элемент контейнера, а затем абсолютно позиционируете дочерние элементы внутри него. К сожалению, вы не можете поместить одно изображение в другое. Вот почему мне нужен контейнер div. Обратите внимание, что я сделал его поплавком, чтобы он автоматически соответствовал его содержимому. Отображение: inline-block теоретически должен работать, но поддержка браузера там плохая.

ОБНОВЛЕНИЕ: я удалил атрибуты размера из изображений, чтобы лучше проиллюстрировать мою точку зрения. Если вы хотите, чтобы изображение контейнера имело размеры по умолчанию, и вы не знаете размер заранее, вы не можете использовать фоновый трюк. Если вы это сделаете, это лучший путь.

Ответ 4

Одна из проблем, которые я заметил, может вызвать ошибки, заключается в том, что в ответе rrichter код ниже:

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

должен включать единицы px в стиле, например.

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

Кроме того, ответ работал нормально. Спасибо.

Ответ 5

Вы можете полностью позиционировать pseudo elements относительно своего родительского элемента.

Это дает вам два дополнительных слоя для воспроизведения для каждого элемента - поэтому позиционирование одного изображения поверх другого становится легким - с минимальной и семантической разметкой (без пустых div и т.д.).

Разметка:

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

Здесь LIVE DEMO

Ответ 6

Самый простой способ сделать это - использовать background-image, а затем просто вставить & lt; img & gt; в этом элементе.

Другой способ сделать это - использовать слои CSS. Существует множество ресурсов, которые могут помочь вам в этом, просто найдите слои CSS.

Ответ 7

Встроенный стиль только для ясности здесь. Используйте реальную таблицу стилей 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>

Ответ 8

@buti-oxa: не быть педантичным, но ваш код недействителен. Атрибуты HTML width и height не учитывают единицы; вы, вероятно, думаете о свойствах CSS width: и height:. Вы также должны указать тип содержимого (text/css; см. Код Espo) с тегом <style>.

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

Выход px; в атрибутах width и height может привести к отказу механизма рендеринга.

Ответ 9

Это может быть немного поздно, но для этого вы можете сделать:

enter image description here

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