HTML/CSS - Поместите img поверх img?

Question

У меня есть два png. Один из них - это изображение, другое - прозрачное изображение с иконкой цены наклейки в правом верхнем углу. Я знаю, что я мог бы объединить их в Photoshop и просто создать одно изображение.

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

Есть ли способ кодировать «фактическое изображение», а затем использовать код для наложения «прозрачного изображения наклейки»?

Answer 1

Вам нужно будет установить атрибут position относительно относительного или абсолютного значения, установите атрибуты слева и сверху на нужные значения, затем установите для атрибута z-index значение 1 (при условии, что у вас нет другого z-индекса свойства уже установлены). Имейте в виду, что место, где изображение должно отображаться без измененных верхних и левых атрибутов, будет там, где оно должно быть.

Answer 2

Конечно, проще всего было бы абсолютно позиционировать оба изображения в своем контейнере:

<div style="position:relative"> 
    <img src="main-image.jpg" style="position:absolute;"/> 
    <img src="overlay-image.png" style="position:absolute;"/> 
</div> 

position:relative на контейнере необходимо для абсолютного позиционирования детей на работу. Конечно, если контейнер сам по себе уже установлен, то это нормально.

position:absolute является не необходимо на базовое изображение, если оба изображения находятся в верхнем левом углу, но с его позволяет настроить его размещение в случае необходимости.

Вы также можете использовать статическое положение на основном изображении и относительное положение на накладываемом изображении:

<div style="position:relative"> 
    <img src="main-image.jpg" style="width:100px"/> 
    <img src="overlay-image.png" style="position:relative; left:-100px"/> 
</div> 

но для этой работы вам нужно знать ширину основного изображения.

Answer 3

Оберните изображения в <div> с изображением наложения первым и фактическим изображением во-вторых и установите css div на position: relative.

Два изображения затем могут быть даны css {position: absolute; top: 0; left: 0;}.

<div style="position:relative;"> 
    <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> 
    <img src="actual.png" style="position: absolute; top: 0; left: 0;"> 
</div>` 

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