鼠标悬停div时如何实现background-image平滑切换效果？

background-image 属于CSS默认不支持过渡动画的属性，直接切换会出现生硬跳变，可通过以下方案实现平滑过渡，完全兼容你当前行内设置背景图的限制：

方案：最低改造成本的淡入淡出方案（全主流浏览器兼容） #

1. 新增容器CSS样式 #

你原有#conf的所有样式保留，新增以下两个属性即可：

#conf {
  /* 原有样式不变 */
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

你可以调整0.4s的数值来控制过渡的整体快慢。

2. 微调现有JS代码 #

修改逻辑为：先降低容器透明度→切换背景图→恢复透明度，实现自然的淡入淡出过渡：

function onmouseover(){
    var element = document.getElementById('conf');
    element.style.opacity = 0;
    setTimeout(() => {
        element.style.backgroundImage = "url('/imgs/jpg/stats.jpg')";
        element.style.opacity = 1;
    }, 200); // 该数值设置为CSS过渡时长的一半即可
}
function onmouseout(){
    var element = document.getElementById('conf');
    element.style.opacity = 0;
    setTimeout(() => {
        element.style.backgroundImage = "url('/imgs/jpg/welcome_back.jpg')";
        element.style.opacity = 1;
    }, 200);
}

可选优化：避免图片加载闪烁 #

如果首次切换背景图时出现空白，可提前预加载两张背景图，在页面加载完成后执行以下代码即可：

// 预加载背景图
const preloadImgs = ['/imgs/jpg/stats.jpg', '/imgs/jpg/welcome_back.jpg'];
preloadImgs.forEach(imgSrc => {
    const img = new Image();
    img.src = imgSrc;
});

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