是替换元素，部分浏览器（如safari ios、旧版chrome android）对它的:hover支持极弱，且直接加filter动画易致retina屏模糊、动画卡顿；须用容器包裹并启用硬件加速。
直接用 filter + :hover 就能实现，但必须作用在容器上、不能直接写在 <img> 上，否则移动端失效、高 DPI 下糊、动画卡顿。
为什么 <img> 标签上写 :hover 会出问题
浏览器把 <img> 当作“替换元素”，部分版本（尤其是 Safari iOS 和旧版 Chrome Android）对它的 :hover 支持极弱；鼠标移入可能不触发，或只在第一次生效。更隐蔽的问题是：直接在 img 上加 filter 动画，在 Retina 屏下容易出现边缘锯齿或模糊——因为没启用硬件加速层。
- 必须用包裹容器（如
<div class="img-filter"> 或 <code><figure></figure>）承载:hover - 容器需设
overflow: hidden，防止滤镜溢出（尤其blur()） - 图片本身加
transform: translateZ(0)或will-change: filter可强制走合成层，避免重绘 -
grayscale(1)：全灰，适合“禁用态”提示；grayscale(0.5)是半灰，过渡自然 -
brightness(1.2)：提亮，值 >1 才有效；brightness(0.8)是压暗，慎用低于 0.6，易丢失细节 -
blur(2px)：轻微模糊适合“背景虚化”效果；超过4px在低端机上明显掉帧 -
hue-rotate(30deg)：色相偏移，配合saturate(1.3)可做“霓虹感”，但别在大图上滥用，色偏难控制 - 没给容器设
display: block或inline-block—— 行内元素默认无法触发:hover过渡 - 图片用了
width: 100%但父容器没设宽高，导致 layout 不稳定，间接触发重排 - 同时用了
transform和filter动画，但没加will-change: transform, filter，浏览器没提前分配合成层
filter 常用值怎么选：灰度 / 高亮 / 模糊 / 色调
不同滤镜对性能和视觉效果影响差别很大，别无脑堆参数：
多个滤镜叠加用空格分隔：filter: brightness(1.1) saturate(1.2) contrast(1.05)，顺序会影响最终结果。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
过渡动画卡顿？检查这三点
写了 transition: filter 0.3s 还是卡，大概率是下面某个被忽略：
推荐最小可用组合：
.img-filter { display: inline-block; overflow: hidden; }<br>.img-filter img { display: block; transition: filter 0.25s ease, transform 0.25s ease; will-change: filter, transform; }<br>.img-filter:hover img { filter: brightness(1.15) grayscale(0.2); transform: scale(1.02); }
深色模式适配别靠 hover 切图
想让图片在深色模式下自动换为暗色版本，不要用 :hover 模拟切换 src 或切背景图——这破坏懒加载、SEO，且无法响应系统偏好变化。
正确做法是用 <picture></picture>：
<picture><br><source media="(prefers-color-scheme: dark)" srcset="avatar-dark.jpg"><br> @@##@@<br></source></picture>再配合
filter 微调亮度，才是兼顾可访问性与性能的方案。
