CSS滤镜filter如何影响颜色？sepia、grayscale等效果演示

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); — 明显的老照片效果

常用于摄影类网站或历史主题页面，提升视觉情绪。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

其他颜色相关滤镜简要说明

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 不仅能美化界面，还能提升用户体验，尤其在图片展示和动态交互中非常实用。注意性能影响，尤其是对大图或动画频繁使用的场景。

以上就是CSS滤镜filter如何影响颜色？sepia、grayscale等效果演示的详细内容，更多请关注php中文网其它相关文章！