Можно ли иметь фиксированные элементы (кнопки, приветствия) поверх динамического фонового изображения, которое увеличивается? - PullRequest
Новая
       6

Можно ли иметь фиксированные элементы (кнопки, приветствия) поверх динамического фонового изображения, которое увеличивается?

0 голосов
/ 28 октября 2019

Я создаю веб-чат. Главная страница имеет динамическое фоновое изображение, которое плавно масштабируется. Есть несколько «приветственных» слов, поле для ввода имени пользователя и кнопка «Отправить». Все эти элементы увеличиваются вместе с фоновым изображением. Можно ли сделать их не анимированными с фиксированным фоном?

Это для построения веб-чата с Flask, SocketIO, некоторыми Vue, html и css.

HTML: 

  <div class="background">
      <head>
        ...
      </head>
      <body>
          <div class="container" id="app">
             <div v-if="state == 0">
                <h2>Welcome to this chat! Please choose a username</h2>
                <form @submit.prevent="setUsername">
                  <input type="text" placeholder="Username..." maxlength="25" v-model:value="username" />
                  <p><input type="submit" value="Join" v-bind:disabled = "username === ''"/></p>
                </form>
              </div>
              <div v-if="state == 1">
                  <ul id="chatbox">
                    <li v-for="msg in this.messages">
                      <b>[[ msg.user ]]</b> : [[ msg.message ]]
                    </li>
                  </ul>
                  <form @submit.prevent="sendMessage">
                  <input type="text" maxlength="600" size="65" placeholder="Message..." v-model:value="message" />
                  <input type="submit" value="Send" v-bind:disabled = "message ===''"/>
                  </form>
              </div>
          </div>

И CSS: 

.background {
  margin: 0;
  padding: 0;
  background-image: url('../images/music.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  text-align: center;
  -webkit-animation: zoomin 5s ease-in;
  animation: zoomin 5s ease-in;
}


@-webkit-keyframes zoomin {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */


#app {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      height: 75vh;
      width: 95vw;
      position: relative;
      z-index: 2;
}

Я ожидал, что кнопки и окно ввода будут статичными, но они увеличиваются вместе с фоном.

Другая проблема заключается в том, что фонизображение немного «прыгает» назад при увеличении анимации.

1 Ответ

1 голос
/ 28 октября 2019

Анимации в родительском контейнере будут влиять на внутренние элементы. Что вы можете попробовать, так это добавить псевдо в .background, чтобы оно влияло только на этот элемент. 

.background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/music.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  -webkit-animation: zoomin 5s ease-in;
  animation: zoomin 5s ease-in;
}
...