图片悬停加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() 难以还原老胶片质感。

• 推荐组合：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 时容易跳变或不触发。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 写样式时，把 -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> 加 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 作用于整个渲染层，开启后可能触发额外合成层，长列表中大量使用会轻微增加内存占用

实际生效的关键不在滤镜多炫，而在 transition 是否可靠、前缀是否覆盖到位、以及是否误把 layout 触发逻辑当成了视觉问题——这些地方一错，效果就卡在“看起来该动却不动”。