Как я могу создать сцену с перекрывающимися изображениями с помощью z-index и обеспечить адаптивность дизайна? - PullRequest
Новая
       60

Как я могу создать сцену с перекрывающимися изображениями с помощью z-index и обеспечить адаптивность дизайна?

0 голосов
/ 30 апреля 2020

Я иллюстратор, который делает часть для сети и довольно плохо знаком с HTML, CSS и Javascript. Для моей основной сцены c мне нужно изображение птицы, чтобы перекрыть изображение неба, потому что я собираюсь оживить птицу просто (взмах крыльев и т. Д. 1014 *.) В окончательном варианте.

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

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <div id='scene'>
        <img class='sky' src='skybox.png'>
        <img class='bird' src='bird.png'>
    </div>

  </body>

</html>

CSS

#scene {
    position: relative;
    z-index: -1;
}

.sky {
    position: relative;
    z-index: 1;
}

.bird{
    position: relative;
    z-index: 2;
    /* this is where I'd like to add some percentage that 
    would be responsive and also put the bird at a certain 
    place in the sky. Pixel values work to position it but 
    the top has to be negative even to get it in the sky at 
    all, and percentages do nothing */

}

1 Ответ

0 голосов
/ 30 апреля 2020

Вы хотите поместить родительский контейнер в position: relative, а затем дочерние элементы как position: absolute Таким образом, вы можете контролировать, как они действуют в родительском div.

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

.bird, .sky, .sun {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Вот фрагмент для изучения. :) Дайте мне знать, если у вас есть какие-либо вопросы! 

.scene {
  position: relative;
  width: 50vw;
  height: 50vh;
  z-index: 0;
  overflow: hidden;
}

.bird, .sky, .sun {
  position: absolute;
}

.bird {
  border: 1px solid red;
  height: 10%;
  width: 5%;
  bottom: 10%;
  left: 20%;
  background-color: red;
  z-index: 1;
  overflow: hidden;
}

.sky {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

.sun {
  top: -10%;
  right: -10%;
  height: 30%;
  width: 20%;
  border-radius: 100%;
  background-color: yellow;
  z-index: 2;
  overflow: hidden;
}
<div class="scene">
  <div class="bird"></div>
  <div class="sky"></div>
  <div class="sun"></div>
</div>
...