是否可以在放大的动态背景图像上放置固定元素（按钮、问候语）？

Question

我正在创建网络聊天。主页有一个动态的背景图像，可以平滑地放大。有一些 "welcome" 个单词，用户名输入字段和提交按钮。所有这些元素都与背景图像一起放大。是否可以让它们不带动画，固定在背景上？

这是使用 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;
}

我原以为按钮和输入 window 是静态的，但它们与背景一起放大了。

另一个问题是背景图像 "jumps" 在执行放大动画时稍微后退一点。

Answer 1

父容器上的动画会影响内部元素。您可以尝试向 .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;
}

是否可以在放大的动态背景图像上放置固定元素（按钮、问候语）？

Is it possible to have fixed elements (buttons, greetings) over the dynamic background image which is zooming in?

html

css

background-image