Короткий ответ - да.
Есть много способов справиться с этим. С 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;
}
Итак, давайте посмотрим, что здесь важно. В вашем HTML-документе 3 изображения (imga, imgb и imgc). Чтобы наложить их, вы должны сначала установить для их position значение absolute , чтобы изображения игнорировали любое поведение макета по умолчанию. Затем вы можете использовать свойства 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, а также на элемент. Их будет интересно использовать и, безусловно, они помогут вашему приложению.
Удачи с вашим приложением.