Я пытаюсь перестроить эксперимент CSS, который я провел некоторое время назад, чтобы сделать его более легким и быстрым для просмотра на мобильном телефоне. Оригинальную версию вы можете увидеть здесь . Он состоит из 28 слоев изображений. Сетка с цветочными изображениями установлена в положение: зафиксировано, а пейзаж установлен в положение: абсолютное.
В исходной версии я использовал пустые PNG-изображения на каждом слое сетки, чтобы предотвратить наложение цветочных изображений друг на друга. Это что-то вроде хака, и я ищу менее сложное решение. Я знаю, что мог бы также создавать пустые div для подобного эффекта, но опять же не идеал.
Я дошел до того, что вынул все изображения цветов, установив их в положение: фиксированное и отображение: встроенный блок, каждый их собственный Z-индекс. Расслоение работает, но все они сложены друг на друга. Я хочу, чтобы они отображались в сетке, чтобы вы могли видеть исчезающий эффект коллажа.
Я нашел это post , что является аналогичной проблемой. Я попытался поместить div вокруг каждого изображения цветка и использовать соответствующий CSS, но это не сработало. Я также прочитал порядок наложения z-index и понимаю, почему моя разметка ниже не работает. Однако я не могу придумать, как достичь желаемого результата!
Заранее благодарен за любые отзывы.
Здесь приведена наценка («Уровни» относятся к видимым слоям ):
html, body {
width: 100%;
margin: 0;
min-width: 980px;
}
.scene {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
min-width: 980px;
height: auto;
}
.flower {
display: inline-block;
min-width: 10%;
max-width: 100px;
position: fixed;
}
/* Layer 1 */
#scene1 {
z-index: 0;
}
/* Layer 2 */
#layer2 {
z-index: 20;
}
/* Layer 3 */
#scene2 {
z-index: 2;
}
/* Layer 4 */
#layer4 {
z-index: 1;
}
/* Layer 5 */
#scene3 {
z-index: 5;
}
/* Layer 6 */
#layer6 {
z-index: 24;
}
/* Layer 7 */
#scene4 {
z-index: 7;
}
/* Layer 8 */
#layer8 {
z-index: 4;
}
/* Layer 9 */
#scene5 {
z-index: 9;
}
/* Layer 10 */
#layer10 {
z-index: 10;
}
/* Layer 11 */
#scene6 {
z-index: 11;
}
/* Layer 12 */
#layer12 {
z-index: 6;
}
/* Layer 13 */
#scene7 {
z-index: 13;
}
/* Layer 14 */
#layer14 {
z-index: 14;
}
/* Layer 15 */
#scene8 {
z-index: 15;
}
/* Layer 16 */
#layer16 {
z-index: 16;
}
/* Layer 17 */
#scene9 {
z-index: 17;
}
/* Layer 18 */
#layer18 {
z-index: 18;
}
/* Layer 19 */
#scene10 {
z-index: 19;
}
/* Layer 20 */
#layer20 {
z-index: 28;
}
/* Layer 21 */
#scene11 {
z-index: 21;
}
/* Layer 22 */
#layer22 {
z-index: 12;
}
/* Layer 23 */
#scene12 {
z-index: 23;
}
/* Layer 24 */
#layer24 {
z-index: 22;
}
/* Layer 25 */
#scene13 {
z-index: 25;
}
/* Layer 26 */
#layer26 {
z-index: 26;
}
/* Layer 27 */
#scene14 {
z-index: 27;
}
/* Layer 28 */
#layer28 {
z-index: 8;
}
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-1.jpg" id="layer2" class="flower"> <!-- Level 20 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-2.jpg" id="layer4" class="flower"> <!-- Level 2 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-3.gif" id="layer6" class="flower"> <!-- Level 24 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-4.gif" id="layer8" class="flower"> <!-- Level 4 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-5.gif" id="layer10" class="flower"> <!-- Level 10 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-6.gif" id="layer12" class="flower"> <!-- Level 6 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-7.jpg" id="layer14" class="flower"> <!-- Level 14 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-8.gif" id="layer16" class="flower"> <!-- Level 16 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-9.jpg" id="layer18" class="flower"> <!-- Level 18 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-10.gif" id="layer20" class="flower"> <!-- Level 28 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-11.gif" id="layer22" class="flower"> <!-- Level 12 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-12.gif" id="layer24" class="flower"> <!-- Level 22 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-13.gif" id="layer26" class="flower"> <!-- Level 26 -->
<img src="https://frejachristiana.com/mygarden/azaleas/flowers/azalea-14.gif" id="layer28" class="flower"> <!-- Level 8 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea.png" id="scene1" class="scene"> <!-- Level 1 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-2.png" id="scene2" class="scene"> <!-- Level 3 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-3.png" id="scene3" class="scene"> <!-- Level 5 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-4.png" id="scene4" class="scene"> <!-- Level 7 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-5.png" id="scene5" class="scene"> <!-- Level 9 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-6.png" id="scene6" class="scene"> <!-- Level 11 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-7.png" id="scene7" class="scene"> <!-- Level 13 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-8.png" id="scene8" class="scene"> <!-- Level 15 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-9.png" id="scene9" class="scene"> <!-- Level 17 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-10.png" id="scene10" class="scene"> <!-- Level 19 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-11.png" id="scene11" class="scene"> <!-- Level 21 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-12.png" id="scene12" class="scene"> <!-- Level 23 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-13.png" id="scene13" class="scene"> <!-- Level 25 -->
<img src="https://frejachristiana.com/mygarden/azaleas/azalea-bg-14.png" id="scene14" class="scene"> <!-- Level 27 -->