Question

我使用javascript 创建动画背景到我的网站 https://coolio85.com

这是我的HTML代码，其中会发生色移

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<title>Welcome to coolio85.com</title>
<script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>

<script src="js/anibackground.js"></script>
</head>
<body>
<div id="gradient" />

这是用于定位背景以适合整页的CSS

#gradient {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

这是使用DIV ID的java脚本代码

$('#gradient').css({
    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

实心背景颜色中有一个黑色条，背景最初设置在屏幕顶部。

Answer 1

正如我在评论中所说，你可以这样做：

body {
  height: 100vh;
}

#gradient {
  height: 100%;
}

Javascript动画背景不覆盖整个屏幕

1 个答案: