grayscale将图像转为灰度，参数0到1控制去色程度，sepia添加棕褐复古色调，两者常用于交互与视觉设计，结合brightness、contrast等滤镜可实现丰富效果，提升用户体验。
滤镜（filter）是CSS中用于对元素的视觉效果进行图形处理的强大工具，常用于图像、背景或整个容器的颜色和外观调整。它通过应用一系列图形效果（如模糊、亮度调整、色相旋转等）来改变元素的渲染方式。其中，sepia 和 grayscale 是两个常用的颜色相关滤镜，能显著影响颜色表现。
grayscale：将颜色转为灰度
grayscale() 滤镜会将元素的颜色转换为不同程度的灰色，去除所有色彩信息。参数取值范围是 0 到 1（也可用百分比），0 表示无变化，1 或 100% 表示完全灰度。
示例：-
filter: grayscale(0);— 原始颜色，无变化 -
filter: grayscale(0.5);— 50% 灰度，保留部分色彩感 -
filter: grayscale(1);— 完全黑白，无彩色
这个滤镜适合在鼠标悬停前展示静态图，悬停后恢复色彩，增强交互体验。
sepia：添加怀旧棕褐色调
sepia() 滤镜会给图像添加一种类似老照片的暖棕色调，营造复古氛围。参数同样为 0 到 1 或百分比，0 表示无效果，1 或 100% 为完全棕褐色。
立即学习“前端免费学习笔记（深入）”；
示例：-
filter: sepia(0);— 原图不变 -
filter: sepia(0.5);— 轻微复古感 -
filter: sepia(1);— 明显的老照片效果
常用于摄影类网站或历史主题页面，提升视觉情绪。
其他颜色相关滤镜简要说明
CSS filter 还支持多个与颜色相关的函数，可单独使用或组合叠加：
-
brightness()：调节明暗。
brightness(0)为全黑，brightness(1)正常，大于1则更亮 -
contrast()：调整对比度。
contrast(0)会变成灰色平图，contrast(2)增强对比 -
hue-rotate()：按色相环旋转颜色，单位是deg。例如
hue-rotate(90deg)会让整体偏绿黄 -
saturate()：饱和度控制。
saturate(0)完全去色（类似灰度），saturate(2)颜色更鲜艳
组合使用滤镜实现复杂效果
你可以将多个滤镜连写，以创建更丰富的视觉风格。
例如，模拟老电影风格：filter: sepia(0.8) saturate(0.7) contrast(1.2);
这段代码会让图像呈现浓郁的复古感，同时略微增强对比和控制饱和度，避免过于浓重。
基本上就这些。合理使用 filter 不仅能美化界面，还能提升用户体验，尤其在图片展示和动态交互中非常实用。注意性能影响，尤其是对大图或动画频繁使用的场景。
