Можете ли вы накладывать изображения друг на друга на веб-странице?

Ответ 1

Короткий ответ - да.

Есть много способов справиться с этим. С HTML/CSS вы можете легко перемещать элементы друг на друга.

HTML:

<img id="imga" src="img1.png"/>
<img id="imgb" src="img2.png"/>
<img id="imgc" src="img3.png"/>

CSS:

img
{
    position:absolute;
    top: 0px;
    left: 0px;
}

Итак, давайте посмотрим, что здесь важно. У вас есть 3 изображения в вашем документе HTML (imga, imgb и imgc). Чтобы наложить их, вы должны сначала установить позицию на абсолютную, чтобы изображения игнорировали любые поведения макета по умолчанию. Затем вы можете использовать свойство left и top, чтобы определить координаты x, y элементов img соответственно. В приведенном выше примере все элементы накладываются в верхнем левом углу страницы. Чтобы контролировать, какое изображение заканчивается сверху, вы можете использовать свойство z-index, например:

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

Это приведет к тому, что imgc появится впереди, imgb появится за imgc и imga за всем остальным. Свойство z-index присваивает этот элемент перед другим. Элемент с наибольшим z-index идет сверху, затем второй по величине и т.д.

Для вашего проекта мы можем немного настроить код выше:

HTML

<img id="layer1" src="img1.png"/>
<img id="layer2" src="img2.png"/>
<img id="layer3" src="img3.png"/>

CSS

img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
   z-index: 10;
}
#layer2
{
z-index: 20;
}

#layer3
{
z-index: 30;
}

Поскольку вы теперь понимаете, что лежит там, вы знаете, что layer3 находится сверху (слой аксессуаров), layer2 находится посередине (ваш человек). и layer1 находится внизу (фон). Затем вы можете создавать такие аксессуары:

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

И затем, используя javascript, вы можете установить первый уровень src равным щелкнутому аксессуару.

function setAccessory(path){
     document.getElementById('layer1').src = path;
     //if you're using jQuery, $("#layer1").attr("src", path);
}

Вы можете создать столько аксессуаров, сколько хотите. Скажем, вы хотите добавить больше аксессуаров поверх своего лица, тогда вы можете легко создать больше слоев, назначить их z-индексы (и даже делать это динамически с помощью javascript, как интересно!)

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

Удача с вашим приложением.

Ответ 2

Вам нужно будет использовать комбинацию позиции: абсолютная с заданными верхними и левыми позициями, а также z-индексы для управления тем, какие элементы отображаются сверху.

Ответ 3

Если вы ищете решение, требующее меньше кода, попробуйте следующее:

• Создайте свое искусство в Photoshop, с каждым аксессуаром на другом слое
• Сохраните каждый слой как отдельное изображение. Убедитесь, что все изображения имеют полный размер холста и используют прозрачность. Сохранить как PNG-24. Таким образом, положение каждого аксессуара будет "жестко закодировано" в изображениях, поэтому вам не придется обрабатывать его в коде.
• Создайте контейнер <div> и дайте ему position: relative;.
• Поместите все изображения внутри <div>, как теги <img>, в правильном порядке (соедините слои, причем фоновое изображение будет первым)
• Примените position: absolute; к каждому <img>.

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

Ответ 4

Я бы рассмотрел использование тега <canvas> и API.

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

Для обратной совместимости в IE вам нужно будет использовать плагин javascript Google Explorer Canvas.

Ответ 5

Используя анимацию jQuery, вы можете создавать "перетаскиваемые" изображения. Дайте вашим изображениям событие onmousedown, которое запускает функцию, которая перемещает ваше изображение по горизонтали X и Y вертикальным пикселям в зависимости от текущего местоположения мыши. Ознакомьтесь с этой ссылкой, чтобы узнать, как найти местоположение мыши с помощью jQuery. http://docs.jquery.com/Tutorials:Mouse_Position

Или, что еще лучше, получить плагин jQuery UI "droppable", который позволяет легко передавать функции перетаскивания любому элементу. http://jqueryui.com/demos/droppable/

Ответ 6

CSS3 поддерживает несколько фоновых слоев

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

Ответ 7

Используя комбинацию свойств css, вы можете добиться того, что вам нужно.

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

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

Отъезд:

http://www.html.net/tutorials/css/lesson15.php

Для получения подробной информации об этом.