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

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

Я просто хочу, чтобы положение снимков относительно друг друга.

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

214
css graphics html optimization

9 ответов

хорошо, через некоторое время, вот на что я приземлился:

.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 знал, насколько оно должно быть большим; поместите наложения как абсолютные относительно верхнего левого края первого изображения. Хитрость в том, чтобы получить родственников и абсолюты правильно.

388

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

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

источник

59

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

<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. Вы ставите position: relative на элемент контейнера, а затем абсолютно позиционируете детей внутри него. К сожалению, вы не можете поместить одно изображение в другое. Вот почему мне нужен контейнер div. Обратите внимание, что я сделал его поплавком, чтобы сделать его autofit к его содержимому. Отображение: встроенный блок должен теоретически работать, но поддержка браузера там плохая.

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

34

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

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

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

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

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

11

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

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

разметка:

<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

8

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

простой способ сделать это-использовать фоновое изображение, а затем просто поместить в этот элемент.

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

4

@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 атрибуты могут вызвать отказ механизма рендеринга.

0

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

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>

Сасс

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