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

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

这是一个用Flask、SocketIO、一些Vue、html和css构建的网络聊天

HTML:

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

---

另一个问题是，在执行放大动画时，背景图像会向后跳一点。

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

---

谢谢你，鲁本萨克。它起作用了。您不仅帮助我解决了这个问题，还让我对伪元素有了更多的了解。

.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;
}

.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;
}