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

html css optimization graphics

699756 просмотра

9 ответа

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

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

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

Автор: rrichter Источник Размещён: 12.09.2019 12:11

Ответы (9)


415 плюса

Решение

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

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

Автор: rrichter Размещён: 04.01.2010 03:40

70 плюса

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

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

Источник

Автор: Espo Размещён: 07.09.2008 02:42

39 плюса

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

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

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

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

Автор: buti-oxa Размещён: 07.09.2008 03:37

11 плюса

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

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

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

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

Кроме этого, ответ работал нормально. Благодарю.

Автор: Wez Размещён: 29.11.2011 06:07

8 плюса

Вы можете абсолютно позиционировать 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;
}

Вот живая демонстрация

Автор: Danield Размещён: 21.01.2013 08:07

5 плюса

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

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

Автор: Chris Bartow Размещён: 07.09.2008 02:40

5 плюса

Встроенный стиль только для наглядности здесь. Используйте настоящую таблицу стилей 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>
Автор: FlySwat Размещён: 07.09.2008 03:42

0 плюса

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

Автор: Sören Kuklau Размещён: 07.09.2008 03:50

0 плюса

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

введите описание изображения здесь

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;
    }
  }
}
Автор: Elkin Angulo Размещён: 01.08.2018 05:37
Вопросы из категории :
32x32