网页加载body背景时出现白闪，如何用CSS/HTML修复？

这个问题我之前帮不少开发者解决过，本质是浏览器的渲染顺序导致的——页面结构先加载完成，背景图片还在后台下载，这时候浏览器会先显示body的默认背景色（也就是白色），等图片加载完成后才替换，所以就出现了恼人的白闪。下面给你几个用CSS或HTML就能直接解决的方案：

1. 匹配背景色与图片主色调 #

最简单的方法是给body设置一个和背景图片主色调一致的背景色，这样就算图片没加载完，显示的颜色和最终背景接近，白闪的视觉感受会大幅降低。

示例CSS代码：

body {
  /* 替换成你背景图片的主色调，比如图片是浅米色就用#f5f0e6 */
  background-color: #f5f0e6;
  background-image: url('your-background-image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* 可选：给图片加载加个过渡动画，让切换更平滑 */
  transition: background-image 0.3s ease-in-out;
}

2. 预加载背景图片 #

提前让浏览器加载背景图片，这样页面渲染时图片已经在缓存里了，就不会出现白闪。有两种常用方式：

方法A：HTML隐藏标签预加载 #

在HTML的<body>开头添加一个隐藏的<img>标签，让浏览器提前加载图片：

<!-- 放在<body>最顶部，优先加载 -->
<img src="your-background-image.jpg" style="display: none; width: 0; height: 0;" alt="Preload background image">

方法B：CSS伪元素预加载 #

用CSS的伪元素来加载图片，不会影响页面布局：

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background-image: url('your-background-image.jpg');
  opacity: 0;
  pointer-events: none; /* 不干扰页面交互 */
}

3. 优化背景图片本身 #

从根源加快图片加载速度，也是解决白闪的关键：

• 压缩图片：用工具把图片压缩到最小体积（比如压缩到几十KB以内，根据图片尺寸调整）
• 使用现代图片格式：换成WebP、AVIF这类压缩率更高的格式，加载速度会比JPG/PNG快很多
• 响应式图片：根据不同设备尺寸加载对应大小的图片，避免移动端加载超大桌面端图片

内容的提问来源于stack exchange，提问作者Paul Alexandru Badulescu