使用HTML制作100%宽度自动轮播图代码运行失效该如何解决？

现有代码存在的问题 #

• 缺少背景图基础适配属性：没有设置background-size、background-repeat、background-position属性，会出现图片重复、尺寸不匹配容器、显示位置偏移的问题，无法适配100%宽度的需求。
• 背景图默认无过渡效果：CSS原生不支持background-image属性的过渡动画，直接设置关键帧切换会出现图片闪切，没有平滑轮播的效果。
• 关键帧节点分配不合理：4张轮播图的节点设置为25%、75%、100%，会导致各图片停留时长不均，首尾切换时会出现跳变。
• 图片路径/后缀疑似错误：代码中a2.img、a3.img不符合常规图片后缀命名规则（常规为jpg、png、webp等），大概率会出现图片加载失败的问题。

修复后的可运行代码 #

下面的代码实现了100%宽度、淡入淡出平滑切换的自动轮播效果，替换为实际图片路径即可使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动图片轮播</title>
    <style>
        .slide{
            width: 100%;
            height: 370px;
            border: 2px solid orange;
            /* 背景图基础适配 */
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            /* 动画设置 */
            animation-name: slide1;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            /* 平滑淡入淡出效果 */
            animation-timing-function: ease-in-out;
        }
        @keyframes slide1{
            0%{
                background-image: url("3.jpg");
                opacity: 1;
            }
            20%{
                background-image: url("3.jpg");
                opacity: 1;
            }
            25%{
                opacity: 0.8;
            }
            30%{
                background-image: url("a2.jpg");
                opacity: 1;
            }
            45%{
                background-image: url("a2.jpg");
                opacity: 1;
            }
            50%{
                opacity: 0.8;
            }
            55%{
                background-image: url("a3.jpg");
                opacity: 1;
            }
            70%{
                background-image: url("a3.jpg");
                opacity: 1;
            }
            75%{
                opacity: 0.8;
            }
            80%{
                background-image: url("a4.jpg");
                opacity: 1;
            }
            95%{
                background-image: url("a4.jpg");
                opacity: 1;
            }
            100%{
                opacity: 0.8;
            }
        }
    </style>
</head>
<body>
    <div class="slide"></div>
</body>
</html>

额外优化说明 #

如果不需要淡入效果，只想实现定点硬切，可以把动画的animation-timing-function改为step-end，同时简化关键帧设置即可：

animation-timing-function: step-end;
@keyframes slide1{
    0%{background-image: url("3.jpg");}
    25%{background-image: url("a2.jpg");}
    50%{background-image: url("a3.jpg");}
    75%{background-image: url("a4.jpg");}
    100%{background-image: url("3.jpg");}
}

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