Question

我正在尝试创建一个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>

有人可以帮我解决我的问题吗？：（

谢谢！

Answer 1

我终于找到了：

将包含#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>

完成！

尽管如此，感谢您的回答！：）

Answer 2

也许你可以设置背景大小，例如：

#particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

或者你的粒子div应该高于联系表格。

在背景中获取Particleground？

2 个答案: