所以我一直在尝试用画布在我的网站背景中移动一些东西，比如一个对象或只是以稍微不同的速度和大小随机出现的线条。但我认为我的背景阻碍了我的创作。是我做错了什么，还是我的背景有问题?我很新的编码，所以请耐心等待我。谢谢!
感谢
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();/*gare kleuren achtergrond*/
body {
background: white;
background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 20px;
overflow: auto;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*witte div*/
#div1 {
width: 101.5%;
height: 1000px;
margin-left: -10px;
margin-right: 220px;
padding: 50px, 50px, 50px, 50px;
background-color:white;
border-radius: 100px 100px 0px 0px;
}
#div1 h1{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
#div1 p{
color: black;
font-family: lucida console, monospace;
font-size: 50px;
text-align: center;
}
h1{
color: black;
font-family: lucida console, monospace;
font-size: 150px;
text-align: center;
margin-top: 300px;
}
.woord {
transition:0.5s;
border: 0px;
height: 550px;
margin-left: -10px;
margin-bottom: -22px;
}
li{
font-size: 30px;
font-family: lucida console, monospace;
display: inline;
text-align: center;
}
a{
transition: ease-in-out .2s;
}
a:link{
text-decoration: none;
color: black;
}
a:visited{
text-decoration: none;
color: black;
}
a:hover{
border: 1px solid;
zoom: 1.1;
}
.nav{
border:1px solid;
border-width:1px;
height: 64px;
list-style:none;
margin:0;
padding:0;
text-align:center;
box-sizing: border-box;
width: 1000px;
margin-left: 220px;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Javascript
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 40){
$(".woord").css({"opacity" : "0"})
}
else {
$(".woord").css({"opacity" : "1"})
}
})
})<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="gaar.js"></script>
</head>
<body>
<div class="woord">
<h1>website</h1>
<canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
<h1>main</h1>
<ul class="nav">
<li><a href="biografie">Biografie</a></li>
<li><a href="fotos">fotos</a></li>
<li><a href="heuristiek">heuristiek</a></li>
<li><a href="buienradar">buienradar</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>hoi</p>
<p>dit is mijn website</br>over mijzelf </p>
</div>
</body>
</html>(在我意识到我误解了原来的问题后编辑)
所以BODY元素将成为文档中所有可见元素的根，所以你不会在后面看到任何东西。因为其他所有元素都被认为是它的子元素。
如果你希望有什么东西在"一切"的背后，你给它一个-1的z-index。这将把它放在所有有z索引集的东西后面，所有有默认索引0的东西后面。注意，要使z-index生效，元素必须使用绝对、固定、相对或粘性定位。
，如果你希望它是可见的，确保出现在它前面的任何东西至少是部分透明的。
.behind {
/* may also be absolute, sticky, or relative */
position: fixed;
/* Put this element behind anything with a higher z-index */
z-index: -1;
background-image: url(https://placekitten.com/408/287);
width: 400px;
height: 280px;
top: 1em;
left: 1em;
}
h1, p {
/* 100% opaque */
/*background-color: white;*/
/* 100% transparency */
/*background-color: transparent;*/
/* 50% transparency */
background-color: rgba(255, 255, 255, 0.5);
}
body {
background-color: rgba(255, 0, 0, 1);
/* Nothing is ever actually behind the BODY tag. */
}<html>
<body>
<h1>Hello, world!</h1>
<div class="behind"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales vehicula nulla vitae eleifend. Donec facilisis ligula a lectus tincidunt sagittis. Morbi libero diam, mattis eget tristique ut, tincidunt ut orci. Curabitur vulputate libero at interdum
vulputate. Quisque tincidunt, sapien quis dapibus accumsan, nulla urna ultrices risus, vel facilisis orci ex id odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus finibus tincidunt sem quis
fermentum. Donec nec tellus eu dui auctor blandit. Aliquam erat volutpat. Donec malesuada diam orci, vitae pulvinar odio tincidunt id. Nam interdum, dolor eu consectetur suscipit, enim eros tempor orci, sit amet ullamcorper ipsum erat id risus. Integer
finibus nisl vel risus interdum maximus. Cras id nulla ut arcu lacinia aliquet sit amet at arcu. Vestibulum scelerisque velit imperdiet leo aliquet, ultricies accumsan turpis faucibus. Cras pulvinar tempus ipsum, et tempor sapien bibendum semper.
Morbi bibendum placerat nisl.</p>
<p>Etiam placerat libero neque, ac imperdiet orci rutrum auctor. Morbi nec commodo justo. Fusce diam lorem, molestie vitae tortor id, vulputate lobortis urna. Aliquam id mauris ligula. Ut posuere tellus ac laoreet pellentesque. Phasellus mollis, felis
sit amet bibendum condimentum, dui risus feugiat quam, ac porttitor dolor mi non mauris. Duis commodo imperdiet tortor, id consequat dolor. Nullam non ullamcorper tellus, eget aliquam nisl. Nunc sed purus eget elit efficitur ornare blandit ut nunc.
Nam finibus iaculis ante, ut suscipit massa venenatis sed. Nullam porta, arcu vitae eleifend gravida, diam orci vulputate magna, in lacinia odio odio non tellus. Duis pretium eget diam vitae auctor. Aliquam cursus urna leo, ac vehicula quam posuere
ac. Etiam in quam justo.</p>
<p>Nullam dictum gravida orci, quis mollis tortor placerat at. Mauris justo diam, iaculis quis maximus vitae, tincidunt et nisl. Nullam venenatis eros risus, a facilisis elit tincidunt dictum. Suspendisse mi elit, lacinia vel elit lobortis, gravida pharetra
dolor. Curabitur quis tincidunt diam. Nulla ligula eros, viverra eu nisi et, suscipit blandit sem. Nullam egestas ante vitae quam hendrerit, quis vestibulum nibh sodales. Quisque in dolor viverra, condimentum tortor ut, bibendum ante. Fusce commodo
mi vel fringilla vehicula. Aliquam mauris leo, feugiat eu varius nec, ornare vel nibh.</p>
</body>
</html>