主页眉添加particles.js粒子效果失败求助（附代码及示例链接）

Hey there! I took a look at your code and the issue is actually pretty straightforward—let's break down what's going wrong and how to fix it:

Key Issues Preventing Particles from Showing Up #

• Missing Parent Height: Your #particles-js uses height: 100%, but neither <html> nor <body> have a defined height. Percentage heights rely on the parent element having an explicit height, so right now your particle container is collapsing to 0 height.
• No Positioning Context: Without setting a positioning value on #particles-js, the particles canvas might be rendering behind your header content, or not filling the space correctly.
• Z-Index Layer Order: Your header section could be covering the particles entirely if they're not layered properly.

Fixed Code #

Let's update your CSS first to fix these issues, then adjust the HTML structure slightly to ensure content sits on top of particles:

Updated CSS #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.section { position: relative; overflow: hidden; }
.section-shaped { position: relative; overflow: hidden; }
.page-header { 
  min-height: 75vh; 
  max-height: 999px; 
  padding: 0; 
  position: relative; 
  overflow: hidden; 
  display: flex; 
  align-items: center;
  z-index: 1; /* Ensure header content is above particles */
}
.light-blue { 
  background-color: rgba(28, 206, 234, 0.82); 
  background-image: linear-gradient(-45deg, rgba(147, 26, 222, 0.83) 0%, rgba(28, 206, 234, 0.82) 100%); 
}
#particles-js { 
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* Send particles to the background */
}
#particles-js>p { position: absolute; top: 100px; }

Updated HTML (minor tweak for positioning context) #

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!---Page Header-->
<div class="section section-shaped light-blue">
  <div id="particles-js"></div>
  <div class="page-header">
    <div class="row">
      <!-- Add your header content here -->
    </div>
  </div>
</div>
</body>
</html>

Why This Works #

1. html/body Height: Setting height:100% on both gives the particle container a proper reference for its own 100% height.
2. Absolute Positioning for Particles: Making #particles-js absolute ensures it fills the entire parent section, and setting z-index:0 puts it behind the header content (which has z-index:1).
3. Layer Order: The header content now sits on top of the particles, so you'll see both the gradient background and the white particles.

Also, double-check that you've correctly included the particles.js library and jQuery in your project (I see you have them in your fiddle, but just a reminder for your actual site!).

内容的提问来源于stack exchange，提问作者Bogdan Puscasu