图片悬停加sepia滤镜无反应，需在原始img样式中添加transition: filter 0.3s ease；推荐组合filter: sepia(1) contrast(0.85) brightness(0.92)增强怀旧感；safari兼容需双写-webkit-filter与filter并配对应transition；避免给父容器设filter影响文字渲染。
图片悬停时加 sepia 滤镜，但没反应？检查是否漏了 transition
直接写 img:hover { filter: sepia(1); } 很可能看不到过渡效果，因为 filter 默认没有动画缓动。浏览器不会自动补帧，必须显式声明过渡属性。
- 加上
transition: filter 0.3s ease;到原始 img 样式里（不是 hover 里） - 避免写成
transition: all 0.3s;——太宽泛，可能触发重排或干扰其他属性 - 如果图片是响应式（比如用
max-width: 100%），确保父容器有明确宽度，否则某些浏览器下 filter 动画会卡顿
sepia 值设成 1 还不够“老照片”？试试叠加 contrast 和 brightness
sepia(1) 只是去色+棕调，真实怀旧感往往需要更低对比、偏暗的基底。纯靠 sepia() 难以还原老胶片质感。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐组合：
filter: sepia(1) contrast(0.85) brightness(0.92); - 注意顺序：CSS filter 是从左到右依次执行，
contrast放sepia后会进一步压缩已棕化的灰阶 - 不要用
opacity模拟褪色——它会让整个图变透明，丢失细节；而brightness+contrast才能模拟氧化发黄的效果
hover 效果在 Safari 上失效？优先用 -webkit-filter 兜底
Safari 15.4 之前对 filter 的 hover 支持不稳定，尤其配合 transition 时容易跳变或不触发。
- 写样式时，把
-webkit-filter放在filter前面，例如：img { -webkit-filter: sepia(0); filter: sepia(0); transition: -webkit-filter 0.3s ease, filter 0.3s ease; } img:hover { -webkit-filter: sepia(1) contrast(0.85) brightness(0.92); filter: sepia(1) contrast(0.85) brightness(0.92); } - 别只写
-webkit-filter不写标准filter——现代 Chrome/Firefox 已不依赖前缀，但保留双写成本极低且兼容更稳 - 如果项目需支持 iOS 14 及更早系统，建议测试真机，模拟器有时无法复现渲染异常
想让文字也跟着变怀旧色？别给父容器套 filter
给包裹图片和文字的 <div> 加 <code>filter 看似省事，但会导致子元素全部被滤镜影响，文字边缘可能出现半透明毛边或颜色失真。
- 正确做法：图片单独设 hover filter，文字用独立 class 控制颜色变化，例如：
.caption { color: #5a4a42; transition: color 0.3s; } - 如果非要统一色调，用 CSS 自定义属性控制 hue/saturation，比全局 filter 更可控：
:root { --sepia-hue: 30deg; }，再用filter: hue-rotate(var(--sepia-hue)) saturate(0.7); - 特别注意：filter 作用于整个渲染层，开启后可能触发额外合成层，长列表中大量使用会轻微增加内存占用
