鼠标悬停时背景图片平滑淡入效果异常问题排查

问题原因 #

你遇到的核心问题是：CSS的background-image属性本身不支持过渡动画。

• 当在多个div之间切换时，是两张已加载的背景图之间的切换，浏览器能识别属性变化并触发过渡；
• 但从外部移入时，容器初始状态没有背景图（或背景为空），从“无”到“有”的变化，浏览器无法将其识别为可过渡的属性变更，所以直接显示图片，没有淡入效果。

解决方案 #

改用伪元素承载背景图，通过控制伪元素的opacity（透明度）实现平滑淡入——opacity是支持CSS过渡的属性，能完美解决“无到有”的淡入需求。

修改后的CSS代码：

.main-container-slide {
    position: relative;
    background-size: 100%;
}

/* 新增伪元素用于承载背景图，默认透明 */
.main-container-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 140%;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: -1; /* 确保伪元素在内容下方，不遮挡交互 */
}

/* hover时切换伪元素的背景图并显示 */
.main-container-slide:has(.slide1:hover)::before {
    background-image: url(https://images.squarespace-cdn.com/content/v1/62bdc86f2062bd28d47d3765/1656604785238-91PU6TXHODSGNODFIJWG/06_STILL_LIFE_265_V3_Master_OP2.jpg);
    opacity: 1;
}

.main-container-slide:has(.slide2:hover)::before {
    background-image: url(https://images.squarespace-cdn.com/content/v1/62bdc86f2062bd28d47d3765/1656604785552-UTV7TX16STHKH4LWGBHO/1509-08g-01_Watches_Details_0105-RGB.jpg);
    opacity: 1;
}

.main-container-slide:has(.slide3:hover)::before {
    background-image: url(https://images.squarespace-cdn.com/content/v1/62bdc86f2062bd28d47d3765/1656604785238-91PU6TXHODSGNODFIJWG/06_STILL_LIFE_265_V3_Master_OP2.jpg);
    opacity: 1;
}

.main-container-slide [class*="slide"]:hover {
    background-color: #66666600;
}

原理说明 #

• 伪元素默认透明度为0，相当于隐藏背景图；
• 当鼠标滑入对应div时，给伪元素设置目标背景图，并将透明度改为1，利用opacity的过渡动画实现平滑淡入；
• 无论是从外部移入还是div间切换，都能触发一致的过渡效果。

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