我正在尝试使用CSS或jQuery在两个图像之间不断切换。我的工作还可以，但它基本上是把一个图像放在另一个上面，如果我使用的图像是透明的，这会引起问题。
null
section {
position: relative;
}
section img {
position: absolute;
width: 200px;
}
.top {
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
@keyframes fade {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}<section>
<img class="bottom" src="https://placeimg.com/640/480/nature">
<img class="top" src="https://placeimg.com/640/480/arch">
</section>null
代码编号:https://codepen.io/rhys_eng/pen/nwdwxao
要解决透明图像相互重叠的问题，您可以使用当前的技术淡出底层图像，因为新图像显示在它上面。为此，为其动画添加1秒延迟。试试看：
null
section img {
position: absolute;
width: 200px;
animation: fade 1s infinite alternate;
}
.bottom {
animation-delay: 1s;
}
@keyframes fade {
0% { opacity: 1; }
25% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0; }
}<section>
<img class="bottom" src="https://placeimg.com/640/480/nature">
<img class="top" src="https://placeimg.com/640/480/arch">
</section>