我在CSS中有要动画的背景图像，因此它会在5秒钟后立即显示（无过渡）CSS：
body {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #dedede;
animation: none;
background:url(img/cat.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
前景中将有一个<table>元素。
您的问题尚不清楚，但是我不愿发表评论，以要求您提供更多细节，但是...根据您输入的信息，我推断出以下内容：
您希望背景图像在5秒钟后显示在body上，并且没有过渡（例如toggle）。
鉴于您没有标记任何framework/library，我将在vanilla JS中进行此操作。
不幸的是，除非您可能不熟悉原始的CSS解决方案[[is，否则我相信您将需要创建一个脚本来执行此操作。
可以
要做的是创建一个“背景div”，该“背景div”将位于您的页面上，并为其赋予fixed位置属性，并且该属性将占据整个屏幕范围。 >这是一个摘要（我没有您的本地cat文件，因此无法通过网络链接进行即兴使用：] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title></title>
<style>
.popout-div {
font-family: 'Roboto', sans-serif;
background-color: #0d0d0d;
color: #dedede;
animation: none;
background:url("https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
</style>
<script>
function showBackground() {
var element = document.getElementById("page-bg");
element.classList.add("popout-div");
}
var counter = 0;
var interval = setInterval(function() {
counter++;
if (counter == 5) {
showBackground();
clearInterval(interval);
}
}, 1000);
</script>
</head>
<body>
<div id="page-bg"></div>
<table>
<thead>
<tr>
<th>Some</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<th>Some</th>
<th>Table</th>
</tr>
</tbody>
</table>
</body>
</html>.popout-div中的位置属性以外的其他属性基本上保持不变。z-index用于表示此图像默认情况下应坐在页面（-1）的内容下方，如果希望此图像显示在内容的顶部，请将其设置为较高的值。
否则，脚本将在页面加载时启动，以倒计时。 5秒钟后，将调用showBackground()，将类应用于page-bg格。
有用的资源：
1）z-index
2）layout