html - 动画背景没有显示在我希望的位置

Closed. This question needs details or clarity。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。
                        
                        9个月前关闭。
                                                                                            
                
        
我覆盖了我的网站以进行响应，现在我还添加了一些新功能。我添加了一个新的动画背景，但现在它没有出现在我想要的位置。另外，我已经在我的学校项目中使用flex进行了大部分编辑，我必须使用flex进行编辑，我们只能在学校项目中使用flex

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  left: -50%;
  bottom: 0;
  top: 0;
  opacity: .5;
  position: fixed;
  right: -50%;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.site1 {
  background: #4B9ACC;
  width: 100%;
  height: 100em;
}

div.wrap content {
    display: flex;
    flex-flow: column;
}

@media screen and (min-width: 600px) {
    div.wrap-content {
        flex-flow: row;
    }
    nav, aside {
        flex: 0 0 10rem;
    }

    body{
        display: flex;
        flex-flow: column;
        background-color: black;
    }
    div.wrap-content {
        flex: 1 auto;
    }
}

main {
display: block;
}

<div class="wrap-content">
    <main>
        <div class="site1" id="3">
          <div class="bg"></div>
          <div class="bg bg2"></div>
          <div class="bg bg3"></div>
          <h1 class="title">Welcome to my Website!</h1>
        </div>
    </main>
</div>

最佳答案

试试这个！

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  left: -50%;
  bottom: 0;
  top: 0;
  opacity: .5;
  position: fixed;
  right: -50%;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.site1 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
h1 {
text-align: center;
}

<div class="site1" id="3">
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <h1 class="title">Welcome to my Website!</h1>
</div>

只需添加此CSS

.site1 {
  background: transparent;
}