实现平滑无旋转背景图切换？跨浏览器兼容问题求解

问题 #

• Firefox中背景图片每3秒正常切换，但Chrome中切换时伴随怪异旋转效果
• 需要调整代码，让主流浏览器表现一致，兼具平滑过渡效果且无异常旋转

问题原因 #

Chrome对background-image的动画处理逻辑与Firefox不同，会尝试对背景图进行不必要的变换插值，导致出现旋转扭曲；同时background-image并非CSS标准定义的可动画属性，不同浏览器的实现行为本身就存在差异。

解决方案 #

改用两个叠加的伪元素分别设置两张背景图，通过控制伪元素的透明度（opacity）实现平滑切换，彻底避免直接动画background-image带来的兼容问题。

修改后的代码 #

HTML（无需改动）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
</head>
<body>
<div class="hero">
  <h1>Hello world</h1>
</div>
</body>
</html>

CSS

.hero {
    position: relative; 
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 第一张背景图伪元素 */
.hero::before {    
    content: "";
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0; /* 替代top/right/bottom/left的简写 */
    opacity: 0.3;   
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Louis-le-Grand--cour-honneur.jpg/800px-Louis-le-Grand--cour-honneur.jpg);
    animation: fadeToggle 6s infinite;
}

/* 第二张背景图伪元素，默认透明 */
.hero::after {    
    content: "";
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    opacity: 0;   
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/E._Marcellot_Sim%C3%A9on-Denis_Poisson_1804.jpg/800px-E._Marcellot_Sim%C3%A9on-Denis_Poisson_1804.jpg);
    animation: fadeToggle 6s infinite reverse; /* 反向动画，和before交替显示 */
}

/* 控制透明度的动画 */
@keyframes fadeToggle {
  0% { opacity: 0.3; }
  50% { opacity: 0; }
  100% { opacity: 0.3; }
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 3em;
  line-height: 0.9;
  text-align: center;
}

方案说明 #

1. 使用::before和::after两个伪元素分别承载两张背景图，默认叠加在容器内
2. 通过fadeToggle动画控制两个伪元素的透明度，reverse关键字让两张图的淡入淡出状态完全相反，实现交替切换
3. 统一设置background-size: cover和background-position: center，保证背景图在不同尺寸容器下的显示一致性
4. 用inset: 0替代冗余的top/right/bottom/left设置，简化代码

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