Как этот сайт размещает изображения во flash / flex (и может ли это быть сделано в обычном html / css)

Question

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

Одна из моих основных частей вопроса так и не получила ответа, поэтому я хотел сосредоточиться на этом (поскольку было трудно изменить фокус на последние вопросы, как только он вспыхнул, а не в общих дебатах)

В первой ссылке на сайт по этому вопросу, поскольку использование делает выбор, эти выборы применяются к изображению, и вы создаете «мастер» изображение со всеми выбранными аксессуарами.Это похоже на многие из этих веб-сайтов «построй куклу», которые я вижу, но есть одно главное отличие, которое лежит в основе моего вопроса.

Например, на шаг 3 ,Вы выбираете цвет и получаете что-то вроде этого:

, затем на шаг 4 , когда вы выбираете «аксессуары», изображения изменяются следующим образом:

или

или

Теперь этот сайтиспользуя flash (или flex, и т. д.), и люди сказали мне, что это может быть воспроизведено без flash. 100% просто смотрят на использование zindex с изображениями и jquery / css, но на приведенных выше изображениях не похоже, что эти дополнительные изображения простоСлоистый сверху, потому что в некоторых случаях аксессуары частично "позади" оригинального изображения (звезды на обратной стороне торта и т. д.).Кажется, что-то более сложное происходит.Кажется, я не могу найти в Интернете ни одного примера, демонстрирующего эту возможность в каком-либо учебном пособии или примере)

Я хотел бы получить обратную связь, если следующие возможности доступны только при использовании обычных CSS, float и т. Д. Или там.Это была особенная особенность flash / flex, на которую я должен был обратить внимание, чтобы предоставить эти возможности, где вы можете «объединять» изображения вместе, чтобы дать вам эффект на изображениях выше.

Answer 1

Использование z-index помогло бы, если бы изображение звезд было в формате gif / png только со звездами.Сделал небольшой макет, чтобы показать вам, что я имею в виду.

В противном случае вы можете создать CSS-спрайт со всеми состояниями торта и просто переместить положение фона изображения в пределахDIV.

Answer 2

Я полагаю, что наиболее распространенный способ решения этой проблемы - это просто использовать вырезанное изображение (разрезать звезды за тортом), чтобы создать впечатление, что звезды находятся за тортом, в то время как на самом деле они впереди.

Другая возможность также состоит в том, чтобы использовать z-index и использовать 3 изображения:

1. звезд позади
2. торт
3. звезды перед тортом.

Все игры с платьями, которые я видел до сих пор, использовали метод "вырезанного изображения". Просто попробуйте что-нибудь сделать с помощью CSS. После этого выполнение javascript может оказаться не слишком сложным.

Answer 3

Я думаю, что вам нужно разбить ваши изображения на следующие категории

1. Главное изображение торта.
2. Аксессуары, которые идут позади.
3. Аксессуары, которые идут впереди.

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

Затем просто установите торт на z-index 2,позади цветов по z-index 1 и цветов перед по z-index 3. Я рекомендую использовать абсолютное позиционирование, чтобы расположить цветы в правильном положении.Если вы установите содержащий div, в котором находятся эти изображения, относительно положения, абсолютное расположение принадлежностей будет относительно верхнего левого угла содержащего div.

Ниже приведен пример HTML и CSS, которые могут помочь.

<div id="cake-container">
   <div id="main-cake">
   </div>
   <div id="accessories-front"></div>
   <div id="accessories-back"></div>
</div>


#cake-container {
   position: relative;
}

#main-cake {
  z-index: 2;
}

#accessories-front {z-index: 3}
#accessories-back {z-index: 1}