Я начинающий программист, пытаюсь показать много изображений на странице. Некоторые изображения должны лежать поверх других. Чтобы упростить задачу, скажем, мне нужен синий квадрат, с красным квадратом в правом верхнем углу синего квадрата (но не плотно в углу). Я пытаюсь избежать композитинга (с помощью ImageMagick и подобных) из-за проблем с производительностью.
Я просто хочу расположить перекрывающиеся изображения относительно друг друга.
В качестве более сложного примера представьте одометр, помещенный внутрь более крупного изображения. Для получения шести цифр мне пришлось бы компоновать миллион различных изображений или делать все это на лету, где все, что нужно, - это поместить шесть изображений одно поверх другого.
Так, после некоторого времени, вот на чем я остановился:
.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 знал, какого размера оно должно быть; разместите оверлеи как абсолютные относительно левого верхнего края первого изображения. Хитрость заключается в том, чтобы правильно указать родственников и абсолютные значения.
Это неполный обзор того, что я сделал, чтобы наложить одно изображение на другое.
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">
Вот код, который может дать вам идеи:
<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][1]
Я подозреваю, что решение Espo'solution может быть неудобным, потому что оно требует абсолютного позиционирования обоих изображений. Возможно, вы хотите, чтобы первое изображение позиционировалось в потоке.
Обычно для этого существует естественный способ - CSS. Вы устанавливаете position: relative на элемент-контейнер, а затем абсолютно позиционируете дочерние элементы внутри него. К сожалению, вы не можете поместить одно изображение внутрь другого. Вот почему мне понадобился контейнер div. Обратите внимание, что я сделал его float, чтобы он автоподгонялся к своему содержимому. Сделать его display: inline-block теоретически тоже должно работать, но браузеры плохо его поддерживают.
EDIT: Я удалил атрибуты размера из изображений, чтобы лучше проиллюстрировать мою мысль. Если вы хотите, чтобы изображение контейнера имело размеры по умолчанию, и вы не знаете размер заранее, вы не можете использовать трюк background trick. Если вы знаете, то этот способ лучше.
Я заметил одну проблему, которая может вызывать ошибки: в ответе rrichter код ниже:
<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>
должен включать единицы px в стиль, например.
<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
В остальном ответ работает нормально. Спасибо.
Вы можете абсолютно точно позиционировать псевдоэлементы
относительно их родительского элемента.
Это дает вам два дополнительных слоя для игры с каждым элементом - так что позиционирование одного изображения поверх другого становится простым - с минимальной и семантической разметкой (без пустых 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][1]
Действующий стиль только для ясности здесь. Используйте реальную таблицу стилей 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>
Простой способ сделать это - использовать background-image, а затем просто поместить в этот элемент.
Другой способ - использовать слои css. Существует масса ресурсов, которые помогут вам в этом, просто найдите css layers.
Возможно, это немного поздно, но для этого вы можете сделать:
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: Не хочу показаться педантичным, но ваш код некорректен. Атрибуты 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
, это может привести к ошибке в работе механизма рендеринга.