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); — 明显的老照片效果
常用于摄影类网站或历史主题页面，提升视觉情绪。
Quinvio AI
AI辅助下快速创建视频，虚拟代言人
59 查看详情
其他颜色相关滤镜简要说明
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等效果演示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/932671.html
微信扫一扫 
支付宝扫一扫 
