img标签无法用color变色，需通过filter（如grayscale、hue-rotate）、伪元素遮罩或内联SVG的fill/stroke实现；hover在移动端不可靠，须兼容触摸交互。
img 标签本身不能直接变色，得用 CSS 覆盖
HTML 的 <img> 是替换元素，不支持像文字那样直接用 color 改颜色。所谓“图片变色”，其实是通过 CSS 给它加滤镜（filter）或遮罩层（::before），或者用 SVG 替换。最常用、兼容性好、代码轻量的方式是 filter。
常见错误：直接写 img:hover { color: red; } —— 完全无效，color 对图片不起作用。
实操建议：
- 优先用
filter: brightness()、grayscale()或hue-rotate()实现“变色感”，比如悬停时加棕褐色调：filter: sepia(1) brightness(0.9); - 若需精确控制色调（如变蓝/变红），用
filter: hue-rotate(90deg) saturate(1.5);，注意hue-rotate是角度值，0–360 循环 - IE 不支持
filter（包括 IE11），如需兼容，得降级为背景图 +div模拟，或用 SVG<image>配合<feColorMatrix>
用 background-image + transition 做平滑变色过渡
单纯改 filter 也能加 transition，但部分浏览器对 filter 动画性能较差，尤其在移动端。更稳的做法是把图片设为 div 的背景，用两个背景图切换（原图 + 预处理色图），或用 background-blend-mode 叠加纯色层。
立即学习“前端免费学习笔记（深入）”；
示例（单图 + 叠加色层）：
.img-hover {
width: 200px;
height: 150px;
background: url('photo.jpg') no-repeat center;
background-size: cover;
position: relative;
}
.img-hover::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 100, 0, 0.3); /* 悬停时叠加橙色蒙版 */
opacity: 0;
transition: opacity 0.3s ease;
}
.img-hover:hover::before {
opacity: 1;
}要点：
- 必须给容器设固定宽高，否则
background不生效 -
::before要设position: absolute并撑满父容器 - 用
rgba()控制颜色透明度，比直接改filter更易预测效果
SVG 图片可直接用 fill / stroke 控制颜色
如果图片是内联 SVG（即 <svg><path></path></svg>），那就可以像操作图标一样，用 fill 或 stroke 直接改颜色，且支持 :hover 和 transition。
示例：
<svg width="48" height="48" viewBox="0 0 48 48">
<path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.83 0-16-7.17-16-16S15.17 8 24 8s16 7.17 16 16-7.17 16-16 16z"
fill="#333" class="icon-fill"/>
</svg>CSS：
.icon-fill {
transition: fill 0.2s;
}
svg:hover .icon-fill {
fill: #e74c3c;
}注意点：
- 外部引用的 SVG（
<img src="icon.svg">）无法用 CSS 控制内部fill，必须内联或用<object>/<iframe> - 如果 SVG 里用了
style="fill:#333"行内样式，会覆盖 CSS，得删掉或用!important（不推荐） - 多色 SVG 需给不同
<path>加 class 分别控制
移动端 hover 效果不可靠，得加 click 兜底
iOS Safari 和多数安卓浏览器中，:hover 只在第一次点击后触发一次，之后失效；纯触摸设备甚至完全不触发。所以仅靠 :hover 做交互，在手机上基本等于没做。
解决思路不是“怎么让 hover 在手机上工作”，而是换交互模型：
- 用
:active替代部分场景（按住时变色），但只响应瞬时态 - 加 JS 监听
touchstart/touchend，动态切 class（如is-hovered） - 更实际的做法：放弃“悬停变色”这个动效，改用点击展开详情、或直接用按钮式交互
真正容易被忽略的是：设计师给的“悬停效果”需求，在落地时必须明确运行环境。PC 端能跑的 filter + transition，到微信内置浏览器可能卡顿，到 iOS 微信可能压根不触发——得提前测真机，而不是等上线才发现。
