如何实现CSS全屏背景图5秒后无过渡即时显示

嘿，我懂你要的效果——页面加载后等5秒，背景图突然毫无过渡地显示出来，同时前景的table不受影响对吧？给你一个完美适配需求的解决方案，核心思路是用伪元素承载背景图，这样就能单独控制它的显示时机，不会干扰前景内容：

最终CSS代码 #

body {
  font-family: 'Roboto', sans-serif;
  background-color: #0d0d0d;
  color: #dedede;
  position: relative; /* 让伪元素以body为定位基准 */
  margin: 0;
  min-height: 100vh; /* 确保伪元素覆盖整个浏览器视口 */
}

/* 用伪元素单独承载背景图，避免影响前景内容 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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;
  opacity: 0; /* 初始状态完全透明 */
  /* 动画：5秒后瞬间显示背景图 */
  animation: showBackground 5s forwards;
}

/* 关键帧定义：前5秒保持隐藏，最后一刻突然显示 */
@keyframes showBackground {
  0%, 99.99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 确保前景的table始终在背景图上方 */
table {
  position: relative;
  z-index: 1;
}

代码解释 #

1. 伪元素承载背景图：把背景图从body移到body::before伪元素里，这样我们可以单独控制它的显示/隐藏，不会让前景的table跟着变透明。
2. 即时显示的动画逻辑：动画时长设为5秒，前99.99%的时间里背景图都保持完全透明，到最后一刻（100%关键帧）瞬间切换为不透明，完美实现“无过渡即时显示”的效果。
3. 前景层级保障：给table设置z-index:1，确保它始终在背景图伪元素的上方，不会被背景图遮挡。

如果想要更极致的初始隐藏（比如让背景图一开始就不占据渲染资源），可以把动画里的opacity替换为visibility+opacity的组合：

@keyframes showBackground {
  0%, 99.99% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

内容的提问来源于stack exchange，提问作者Davioner