HTML / CSS - Поместить img поверх img? - PullRequest
Новая
       2

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

6 голосов
/ 24 марта 2011

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

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

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

Ответы [ 3 ]

11 голосов
/ 24 марта 2011

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

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

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

3 голосов
/ 24 марта 2011

Оберните изображения в <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 каждого изображения.

0 голосов
/ 24 марта 2011

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

...