我已经使用了 Codepen 中预先编写的代码，该代码使用 Canvas 和 webGL 作为我身体上的动画背景，但现在使用它，我的悬停属性不起作用，而且我的背景大小也不同，低于视图高度和也在屏幕中水平延伸了一点。
我该如何解决这个问题，下面是我的代码。
HTML
<body>
<nav class="navbar">
<ul class="menu">
<li>
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Events</a>
<a href="">Contact Us</a>
</li>
</ul>
</nav>
<div class="main_section">
<!-- GRADIENT -->
<canvas id="gradient-canvas"></canvas>
<img src="./Assets/final_logo (2).png" alt="Logo" />
</div>
<script src="gradient.js"></script>
</body>
CSS
body {
/* font-family: var(--body-font); */
color: var(--text-dark);
width: 100%;
margin: 0;
box-sizing: border-box;
/* padding: 0 0 0 0; */
background-color: var(--white);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* NAVBAR */
.navbar {
display: flex;
justify-content: center;
align-items: center;
top: 0;
width: 100%;
padding: var(--spacing-md);
background-color: var(--white);
}
.menu {
width: 100%;
max-width: 1000px;
}
.menu li {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
.menu a {
color: var(--logo-colour);
font-weight: bold;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
cursor: pointer;
}
/* GRADIENT */
.main_section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main_section img {
position: absolute;
}
#gradient-canvas {
width: 100vw;
height: 100vh;
--gradient-color-1: #fefdfc;
--gradient-color-2: #d9c5b6;
--gradient-color-3: #b99b7d;
--gradient-color-4: #856351;
}
我尝试更改显示属性，但后来整个事情变得一团糟，对于尺寸调整，我无法理解为什么会发生这种情况。
为宽度和高度属性添加供应商前缀，以实现更好的跨浏览器一致性：
#gradient-canvas {
width: -webkit-fill-available;
width: -moz-available;
width: fill-available;
height: -webkit-fill-available;
height: -moz-available;
height: fill-available;
}