酷炫的页面让人赏心悦目，让背景图动起来又不能影响布局，该怎么做呢？一定有小伙伴遇到这种情况，背景图动起来页面的元素也跟着一起动，这肯定不是我们要的效果

话不多说直接上代码

    <div class="bigBox">
        <div class="Box">插入背景图</div>
         <div class="topBox">内容区域</div>
        </div>

核心思路：

1：定位position 子绝父相 ，子元素脱离文档流，那就好办了，给bigBox设置相对定位，两个子盒子设置绝对定位

2：脱离文档流后，如果直接对背景图盒子设置动画效果，那么毫无疑问页面的所有元素会跟着一起跳动，解决方式：

z-index-给盒子施加层级 可以简单粗暴的理解，盒子这个属性值越大 就越在上面

Box 背景图盒子 设置层级为-1

topBox 内容盒子 层级为1

这样便可以操作背景图设置动画效果，又不影响内容盒子的布局

3：

 .vid {
  width:100vw;
  height: 69.074vh;
  position: absolute;
  z-index: 1;

}
.Box {
  width: 100vw;
  height: 100vh;
  background: url(输入图片路径) no-repeat 0vw 0vh;
  background-position: center;
  //动画效果
   -webkit-animation: zoom 10s infinite;
  animation-timing-function:cubic-bezier(0.42,0,0.58,1);
  background-size: cover ;
  z-index: -1;
  position: absolute;

}
//动画效果
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
   transform: scale(1);
  }
} 
.bigBox{
  width: 100vw;
  height: 100vh;
  z-index: 1;
  position: relative;
 
}