正确做法是将图片嵌入相对定位容器，遮罩层同级绝对定位覆盖，仅对图片应用transform: scale()并设初始值，配合overflow: hidden防溢出、display: block去间隙、opacity过渡遮罩，触屏需JS降级处理。
图片悬停放大时遮罩层不随图片缩放变形
直接对 transform: scale() 会导致父容器内其他元素（比如遮罩层）位置错乱，尤其当遮罩是绝对定位在父容器上的时候。关键不是“放大图片”，而是“让视觉上看起来图片在放大，同时遮罩保持尺寸和位置稳定”。
正确做法是把图片包进一个相对定位的容器，遮罩层也作为子元素同级存在，并统一用 transform 控制图片缩放，遮罩层本身不动 —— 这样遮罩不会被拉伸、边缘不会虚化、文字也不会模糊。
- 容器必须设
position: relative，否则绝对定位的遮罩会脱离预期范围 - 图片设
display: block，避免底部默认留白造成高度抖动 - 遮罩层用
position: absolute; top: 0; left: 0; width: 100%; height: 100%，确保完全覆盖 - 只给
transform: scale(1.1)，不要给遮罩加任何 transform
transition 动画卡顿或闪一下
常见原因是没声明 transform 的初始值，或者触发了重排（layout）。transform 和 opacity 是唯二能走 GPU 合成的属性，但前提是浏览器知道它要动画的是什么。
必须显式写上初始 transform 值，哪怕就是 scale(1)；同时避免在悬停时突然改变 width、height、top 这类触发布局的属性。
- 给图片加
transform: scale(1); transition: transform 0.3s ease; - 悬停时只改
transform: scale(1.2)，别碰margin或padding - 如果遮罩有淡入效果，用
opacity而非visibility（后者无法过渡） - 加
will-change: transform可提前提示 GPU，但仅在复杂页面中必要，别滥用
移动端 touch 设备上 hover 不生效
:hover 在 iOS Safari 和部分安卓浏览器里，首次点击后才触发，第二次才真正“悬停”，体验断裂。这不是 bug，是规范行为：触摸设备没有持续的“悬停”状态。
真要兼容，得靠 JS 模拟，或者改用 :active + touchstart 事件临时加 class。纯 CSS 方案只能妥协：对触屏设备降级为点击展开（比如加个 toggle 按钮），或直接取消悬停动效，改用点击后切换状态。
- 检测是否为触屏：
@media (hover: none) and (pointer: coarse)可以关掉 hover 动画 - 更稳妥的做法是用
class="hover-enabled"配合 JS，在touchstart后加这个 class，CSS 里写.hover-enabled .card:hover img和.hover-enabled .card.active img两套规则 - 别依赖
:hover做关键交互，比如“点这里看详情”不能只靠悬停显示按钮
图片放大后边缘锯齿或模糊
这是 transform: scale() 放大位图时的固有限制。浏览器对非整数倍缩放的插值处理差异大，Safari 尤其明显 —— 图片可能发虚，或出现彩色噪点边。
缓解方式不是调 image-rendering（它只对 scale(1) 下的像素图有效），而是从源头控制：用更高分辨率图源，或限制最大缩放比（1.15–1.25 是较安全区间）。
- 避免
scale(1.5)以上，尤其原图分辨率低于 400px 宽时 - 用
image-rendering: -webkit-optimize-contrast在 Safari 中稍作改善（但非万能） - 如需高清效果，考虑用 SVG 替代或 CSS
background-image配合background-size: cover+transform，此时可配合background-position做焦点偏移
实际最常被忽略的是容器溢出控制：overflow: hidden 必须加在包裹容器上，否则放大后图片会撑破布局。这点在 flex 或 grid 布局里特别容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
