Javascript 为什么不是'；我的动画背景占据了整个屏幕吗？_Javascript_Html_Css

Javascript 为什么不是'；我的动画背景占据了整个屏幕吗？

javascript html css

Javascript 为什么不是'；我的动画背景占据了整个屏幕吗？,javascript,html,css,Javascript,Html,Css,我试图在我的html网站中放置一个动画交互屏幕，但动画只占用问题容器左侧的一点点空间。这有什么办法以下是我的html索引： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

我试图在我的html网站中放置一个动画交互屏幕，但动画只占用问题容器左侧的一点点空间。这有什么办法

以下是我的html索引：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
   <title>Quiz App</title>
</head>
<body>
  </div>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div> 
    </div>
    <div class="container1">
      <div id="startmsgcontainer" class="hide"></div>
        <div id="startmsg">Adventure Into The Human Immune System</div>
        </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start!</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>
  <div class="wrapper">
      <img src="uni.png" alt="image">
  </div>
 </div> 
  <div id="particles-js"></div>
  <script src="particles.js"></script>
  <script src="app.js"></script>
</body>
</html>

我需要一切保持不变，并发送粒子到整个html网站的背景。我很感激任何帮助，因为我很迷路。（最后一部分是我试图将其发送到后面，但没有成功）

您能为您的代码示例创建一个代码笔吗？从那里更容易看出问题所在。另外，在包含动画的div中添加注释。

我将particles.js与Vue一起使用，但下面是我如何更改大小：

更改包含div的宽度和高度，然后刷新。我以为它一开始不起作用，因为它会拉伸粒子，但我想它需要重新渲染它们

另外，如果您希望将它们发送到后面，请设置

position:absolute；z索引：0

。您还必须对前面的任何内容设置

z-index:1

刚才注意到，您在CSS中使用的是类选择器而不是id选择器：

。particles js

，应该是

#particles js

请提供一个可复制的示例。@hev1“可复制的示例”是什么意思？对不起，我是编程新手，所以我知道的不多jargon@hev1动画屏幕只是问题容器左侧的一个小窗口，我希望它是在整个网站的背景下，我很确定的问题是，我不知道如何定义动画背景作为一个容器，并将其发送到后面，因为问题容器不是集中在页面上。够了吗？试试这个样品

*, *::before, *::after {
    box-sizing: border-box;
    font-family: cursive,
    'Times New Roman', Times, serif
  }
  
  :root {
    --hue-neutral: 0;
    --hue-wrong: 0;
    --hue-correct: 145;
  }

  body {
    --hue: var(--hue-neutral);
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: hsl(var(--hue), 100%, 20%);
  }

  body.correct {
    --hue: var(--hue-correct);
  }
  
  body.wrong {
    --hue: var(--hue-wrong);
  }
  
  .container {
    width: 800px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
  }
  
  .btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    margin: 20px 0;
  }
  
  .btn {
    --hue: var(--hue-neutral);
    border: 1px solid hsl(var(--hue), 100%, 30%);
    background-color: hsl(var(--hue), 100%, 50%);
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
  }
  
  .btn:hover {
    border-color: black;
  }
  
  .btn.correct {
    --hue: var(--hue-correct);
    color: black;
  }
  
  .btn.wrong {
    --hue: var(--hue-wrong);
  }
  
  .next-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    align-items: flex-end;
  }

  .start-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .container1 {
    display: flex;
    justify-content: center;
    align-items: center; 
    font-family: Arial;
    font-size: xx-large;
    padding: 40px 40px;

  }
  
  .controls {
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  
  .hide {
    display: none;
  }

  .wrapper { 
      position: absolute;
      top: 0px;
      right: 0px;
  }

.particles-js {
  background-size: 100vh;
  background-position: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
}