纯CSS实现hover图片交叉融合效果，核心是两张绝对定位图片叠加，上层opacity从0渐变到1、下层反向变化，需设父容器position:relative、避免transition:all、控制宽高比一致。
hover 时两张图交叉融合，本质是用 opacity + transition 控制叠加层
纯 CSS 实现两张大图悬停交叉融合，不靠 JS、不靠 canvas，核心就两点：两张图叠在一起，上层图从 opacity: 0 平滑过渡到 opacity: 1，下层图反向过渡。关键不是“融合”而是“叠加渐变”，浏览器原生支持，兼容性好（Chrome/Firefox/Safari/Edge 均 OK）。
常见错误现象：transition 没生效（忘记加 opacity 或写错属性名）、悬停区域错位（父容器没设 position: relative）、图层顺序颠倒（z-index 没配对）、过渡卡顿（用了 transform 却没触发硬件加速）。
- 必须给父容器设
position: relative，否则absolute定位的图片会脱离文档流乱跑 - 两张图都用
position: absolute叠在同一个位置，上层图初始opacity: 0，下层图默认opacity: 1 -
transition必须写在被改变的元素上（即上层图），且只写opacity 0.4s ease，别加all - 避免在 hover 里改
width/height，会触发重排，影响平滑度
HTML 结构要极简，img 标签直接并列，别套多余 div
结构越扁平，CSS 越可控。很多人喜欢包一层 div class="slider" 再塞两层 div，结果 hover 作用域错、transition 绑错元素、甚至意外继承父级 transform 导致模糊。
正确结构就是两个 <img> 并列，用 class 区分上下层：
立即学习“前端免费学习笔记（深入）”；
<div class="image-blend"> <img src="bg1.jpg" alt="base" class="base"> <img src="bg2.jpg" alt="overlay" class="overlay"> </div>
-
.base是底层图，不加transition，只设position: absolute和尺寸 -
.overlay是上层图，初始opacity: 0，hover 时变成opacity: 1 - 别用
background-image替代<img>—— 无法响应alt、懒加载、宽高比控制更麻烦
transition 时间和缓动函数选错，融合感立刻变 PPT 切换
0.1s 太快像闪屏，1s 又拖沓；ease-in-out 比 linear 更自然，但别用 ease（开头太慢，融合启动迟滞）。真实体验中，0.3–0.5s + cubic-bezier(0.33, 1, 0.68, 1)（类似 iOS 弹性缓动）最接近“呼吸式融合”。
- 别写
transition: all 0.4s—— 万一以后加了filter或transform，会意外触发重绘 - 如果图很大（>2MB），加
will-change: opacity到.overlay，提前告诉浏览器这个属性会变 - 移动端需补
@media (hover: hover)判断，否则 touch 设备一碰就触发（iOS Safari 尤其明显）
图片尺寸不一致或宽高比不同，融合会偏移或拉伸
两张图尺寸差异大会导致悬停时上层图“滑入”或“缩放跳变”。不是靠 object-fit: cover 就能解决 —— 它只管单图裁剪，不管两张图对齐基准点。
- 两张图建议用相同分辨率（如都是 1920×1080），至少保持相同宽高比
-
img必须设width: 100%+height: 100%+object-fit: cover，且父容器有明确宽高（不能靠内容撑开） - 如果必须用不同比例图，用
background-position: center配合background-size: cover改用背景图方案，但会牺牲语义化和 SEO - 测试时打开 DevTools，悬停后检查两个
img的 computedboundingClientRect，确保 left/top/width/height 完全一致
真正难的不是写出来，是让两张图在各种屏幕下像素级对齐、过渡不抖、hover 区域不误触 —— 这些细节没调好，再漂亮的 transition 也像幻灯片。
