我正在尝试制作一个html和css页面，实际上我正在尝试在背景中获取Particleground，但是现在，它仍在页面底部，如下所示：
Particleground problem
我的代码实际上是：
#particles {
width: 100%;
height: 100%;
position: fixed;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Contact form</title>
</head>
<body>
<?php include 'includes/header.html'; ?>
<div class="contactFormContainer">
<div class="insideContactFormContainer">
<h1>Formulaire de contact</h1>
</div>
<div class="contactFormText">
<form action="contact.php" method="post">
<label>Nom d'utilisateur</label>
<input class="userForm" type="text" placeholder="Nom (30 caractères max.)" name="username">
<label>Email</label>
<input class="emailForm" type="email" placeholder="E-mail (100 caractères max.)" name="email">
<label>Message</label><br>
<textarea class="messageForm" rows="4" cols="50" placeholder="Message (2000 caractères max.)" name="message"></textarea><br>
<input type="submit" placeholder="Envoyer" name="submit">
</form>
</div>
</div>
<script src="scripts/Particles/jquery.particleground.js"></script>
<script>
$(document).ready(function() {
$('#particles').particleground({
minSpeedX: 0.1,
maxSpeedX: 0.7,
minSpeedY: 0.1,
maxSpeedY: 0.7,
directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
density: 10000, // How many particles will be generated: one particle every n pixels
dotColor: '#666666',
lineColor: '#666666',
particleRadius: 7, // Dot size
lineWidth: 1,
curvedLines: false,
proximity: 100, // How close two dots need to be before they join
parallax: true,
parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect
onInit: function() {},
onDestroy: function() {}
});
});
</script>
<div id="particles"></div>
</body>
</html>有人可以帮我解决我的问题吗？ :(
谢谢 ！
最佳答案
我终于找到了：
只需将包含#particles的div设置为z-index：-100；在您的CSS文件中
#particles {
z-index: -100;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Contact form</title>
</head>
<body>
<div id="particles"></div>
<div class="contactFormContainer">
<div class="insideContactFormContainer">
<h1>Formulaire de contact</h1>
</div>
<div class="contactFormText">
<form action="contact.php" method="post">
<label>Nom d'utilisateur</label>
<input class="userForm" type="text" placeholder="Nom (30 caractères max.)" name="username"><br><br>
<label>Email</label>
<input class="emailForm" type="email" placeholder="E-mail (100 caractères max.)" name="email"><br><br>
<label>Message</label><br>
<textarea class="messageForm" rows="4" cols="50" placeholder="Message (de 20 à 2000 caractères)" name="message"></textarea><br>
<input type="submit" placeholder='Envoyer' name="submit"><br>
</form>
</div>
</div>
<script src="scripts/Particles/jquery.particleground.js"></script>
<script>
$(document).ready(function() {
$('#particles').particleground({
minSpeedX: 0.1,
maxSpeedX: 0.7,
minSpeedY: 0.1,
maxSpeedY: 0.7,
directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
density: 10000, // How many particles will be generated: one particle every n pixels
dotColor: '#666666',
lineColor: '#666666',
particleRadius: 7, // Dot size
lineWidth: 1,
curvedLines: false,
proximity: 100, // How close two dots need to be before they join
parallax: true,
parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect
onInit: function() {},
onDestroy: function() {}
});
});
</script>
</body>
</html>做完了！
尽管如此，感谢您的回答！ :)