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

Question

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

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

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

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

Как самое простое решение.То есть:

Создайте относительный элемент div, который будет размещен в потоке страницы;сначала поместите базовое изображение как относительное, чтобы элемент div знал, насколько большим оно должно быть;поместите наложения как абсолютные значения относительно верхнего левого угла первого изображения.Хитрость заключается в том, чтобы правильно определить родственники и абсолюты.

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

Источник

Answer 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

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

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

РЕДАКТИРОВАТЬ:Я удалил атрибуты размера из изображений, чтобы лучше проиллюстрировать свою точку зрения.Если вы хотите, чтобы образ контейнера имел размеры по умолчанию, и вы не знаете размер заранее, вы не можете использовать фоновый трюк.Если да, то это лучший путь.

Answer 4

Я заметил одну проблему, которая может вызвать ошибки: в ответе Рихтера приведен код ниже:

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

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

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

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

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

Вот ЖИВАЯ ДЕМО

Answer 6

Самый простой способ сделать это — использовать фоновое изображение, а затем просто поместить <img> в этот элемент.

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

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

Answer 8

@buti-oxa:Не буду педантичным, но ваш код недействителен.HTML width и height атрибуты не позволяют использовать юниты;вы, вероятно, думаете о CSS width: и height: характеристики.Вы также должны указать тип контента (text/css;см. код Эспо) с <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 атрибуты могут привести к сбою механизма рендеринга.

Answer 9

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

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>

САСС

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