时间戳

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

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

问题描述

我正在创建一个网络聊天。主页有一个动态的背景图像，正在平滑放大。有一些“欢迎”字样，用户名输入字段和提交按钮。所有这些元素都与背景图像一起放大。是否可以使它们成为非动画，固定在背景上？

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

我希望按钮和输入窗口是静态的，但它们与背景一起放大。

另一个问题是背景图像在放大动画时“跳”回来一点。

标签： htmlcssbackground-image

解决方案

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

推荐阅读