直接用 filter: hue-rotate() 实现图片悬停变色最简单，需显式声明 transition、使用 deg 单位、完整写出 hover 状态所有 filter 函数，并控制旋转范围在 ±60deg 内以保证自然柔和。
图片悬停时色相旋转的CSS写法
直接用 filter: hue-rotate() 实现图片悬停变色最简单，但要注意浏览器兼容性和旋转值范围——hue-rotate(0deg) 和 hue-rotate(360deg) 视觉上完全一样，别误以为“转得越多越鲜艳”。
典型写法是：
img {
transition: filter 0.3s ease;
}
img:hover {
filter: hue-rotate(90deg);
}
-
transition必须显式声明，否则变化会突兀跳变 - 推荐用
deg单位（不是rad或无单位），避免 Safari 解析异常 - Chrome/Firefox/Edge 现代版本都支持，但 iOS Safari 12.2+ 才稳定支持
hue-rotate，老版本可能直接失效
为什么 hover 后图片变灰或失真？
常见错因是叠加了多个 filter 值却没重置。比如同时写了 blur(1px) 和 hue-rotate(180deg)，但 hover 时只改了 hue-rotate，导致 blur 持续生效，视觉发虚。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- hover 状态必须完整写出所有要应用的
filter函数，不能只写变动项 - 错误写法：
img:hover { filter: hue-rotate(180deg); }（会清空默认 filter） - 正确写法：
img:hover { filter: blur(0) hue-rotate(180deg); } - 如果基础状态没设 filter，hover 里也别漏掉其他函数，比如
contrast(100%)或brightness(1)，否则可能意外降饱和
如何让色相旋转更自然、不刺眼？
单纯 hue-rotate(180deg) 容易显得生硬，因为人眼对红→青这类大跨度变化敏感。实际项目中建议控制在 ±60deg 内，并搭配轻微亮度/对比度微调。
- 试试
hue-rotate(30deg) brightness(1.05) saturate(1.1)，比单转 120deg 更柔和 - 避免用
hue-rotate(0deg)作为 hover 回退值——它和原始图未必一致，尤其当原图本身带 CSS filter 或 img 标签有crossorigin导致渲染差异时 - 如果图片是 PNG 透明背景，
hue-rotate不影响 alpha 通道，但某些旧版 Edge 对透明像素的色相处理有偏差，测试时务必用真实素材
JavaScript 动态控制 hue-rotate 的坑
用 JS 改 style.filter 时，别直接拼字符串覆盖整个 filter 值，否则容易抹掉其他样式（比如父容器加的 drop-shadow）。
- 错误：
el.style.filter = 'hue-rotate(' + deg + 'deg)'; - 推荐用
CSSStyleDeclaration.setProperty()或维护一个 filter 基础模板再替换关键值 - 注意：JS 设置的
filter会覆盖所有内联 filter，但不会影响<style></style>里的规则，除非 specificity 更高 - 动画场景下，频繁 setProperty 可能触发 layout，优先用
requestAnimationFrame节流，或改用 CSS 自定义属性 + calc() 驱动
真正麻烦的是多 filter 组合时的顺序依赖——hue-rotate 在 saturate 前后结果不同，而 JS 拼字符串很难保证顺序，这种时候宁可全量重写，也别试图局部更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
