网站上自定义预加载器的黑色背景

Question

这是我网站的预加载器代码

 <style> 
#site { 
opacity: 0; 
-webkit-transition: all 2s ease; 
transition: all 2s ease; 
} 
#preloader { 
height: 60px; 
width: 60px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top: -20px; 
margin-left: -20px; 
} 
#preloader:before { 
content: ""; 
display: block; 
position: absolute; 
left: -1px; 
top: -1px; 
height: 100%; 
width: 100%; 
-webkit-animation: rotation 1s linear infinite; 
animation: rotation 1s linear infinite; 
border: 0px solid white; 
border-top: 1px solid transparent; 
border-radius: 100%; 
} 
#preloader > .icon { 
position: absolute; 
/*top: 50%; 
left: 50%;*/ 
height: 60px; 
width: 60px; 
/*margin-top: -12.5px; 
margin-left: -5.3px;*/ 
-webkit-animation: 1s ease-in-out infinite alternate; 
animation: 1s ease-in-out infinite alternate; 
} 
@media only screen and (min-width: 768px) { 
#preloader { 
height: 80px; 
width: 80px; 
margin-left: -30px; 
} 
#preloader:before { 
left: -2px; 
top: -2px; 
border-top-width: 2px; 
border-left-width: 2px; 
border-bottom-width: 2px; 
border-right-width: 2px; 
} 
#preloader > .icon { 
height: 80px; 
width: 80px; 
/*margin-top: -18.75px; 
margin-left: -7.95px;*/ 
} 
} 
@media only screen and (min-width: 1200px) { 
#preloader { 
height: 100px; 
width: 100px; 
margin-top: -40px; 
margin-left: -40px; 
} 
#preloader > .icon { 
height: 100px; 
width: 100px; 
/*margin-top: -25px; 
margin-left: -10.6px;*/ 
} 
} 
@-webkit-keyframes rotation { 
from { 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg); 
} 
to { 
-webkit-transform: rotate(359deg); 
transform: rotate(359deg); 
} 
} 
@keyframes rotation { 
from { 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg); 
} 
to { 
-webkit-transform: rotate(359deg); 
transform: rotate(359deg); 
} 
} 
@-webkit-keyframes wink { 
from { 
opacity: 0; 
} 
to { 
opacity: 1; 
} 
} 
@keyframes wink { 
from { 
opacity: 0; 
} 
to { 
opacity: 1; 
} 
} 
</style> 
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="URL OF GIF"> 
</div> 
<main id="site" role="main"></main> 
<script type="text/javascript"> 
(function(){ 
var preload = document.getElementById("preloader"); 
var loading = 0; 
var id = setInterval(frame, 64); 
function frame(){ 
if(loading == 100){ 
clearInterval(id); 
//window.open('welcome.html', '_self'); 
} else { 
loading = loading + 1; 
if(loading == 90){ 
preload.style.opacity = "0"; 
} 
} 
} 
})(); 
/*(function preloader() { 
var preloader = document.getElementById("#preloader"); 
preloader.style.opacity = "0"; 
preloader.setAttribute("aria-busy", "false"); 
document.getElementById("#site").style.opacity = "1"; 
}) 
window.onload = preloader;*/ 
</script>

现在我有一个白色背景，我希望背景是纯黑色。我尝试了一些方法，但似乎没有任何效果。

我正在从 URL 加载 GIF。

我知道黑色的颜色代码是#000000，我尝试输入它而不是 opacity = 0;，但似乎没有任何效果。

有什么建议吗？

Answer 1

添加此样式

html {
     height: 100%; 
     background-color: black; 
}

Answer 2

html , body{ height: 100%;}
html {background-color: black;}

网站上自定义预加载器的黑色背景

Black Background For a Custom Pre Loader on a Website

javascript

css

background

preloader

background-color