如何为body标签的background-image属性添加淡入动画（无需额外div）

直接使用transition: background-image无法实现淡入效果——浏览器不支持背景图片这类离散属性的过渡动画，切换时会直接跳转而非渐变。不过可以通过body伪元素实现需求，完全不需要添加额外div：

方案代码 #

CSS部分 #

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("img.jpg");
  background-size: cover;
  opacity: 0;
  transition: opacity 4s linear;
  z-index: -1; /* 将背景伪元素置于页面内容下方 */
}

/* 触发淡入的类 */
body.bg-loaded::before {
  opacity: 1;
}

JS触发（可选，页面加载完成后淡入） #

// 等待页面资源加载完成后触发淡入
window.addEventListener('load', () => {
  document.body.classList.add('bg-loaded');
});

原理说明 #

• 用body::before伪元素承载背景图，伪元素不属于额外添加的div元素，符合需求；
• 通过过渡opacity属性实现平滑淡入，opacity是连续属性，浏览器可以计算过渡帧；
• 借助JS监听页面加载完成事件，给body添加类来触发opacity从0到1的过渡，实现图片淡入效果。

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