grayscale()将元素转为灰度图像,参数为百分比或0-1数值,100%完全黑白,0%保持原色,常用于图片、背景、SVG等视觉效果控制。

在CSS中,filter: grayscale() 用于将元素的颜色转换为灰度图像。它不会直接“调整”某种特定颜色,而是将整个元素的色彩饱和度降低到零,呈现出黑白效果。
grayscale(值) 接受一个参数,可以是百分比或0到1之间的数值:
将图片变为黑白:
img {鼠标悬停时恢复原色:
立即学习“前端免费学习笔记(深入)”;
免费 盛世企业网站管理系统(SnSee)系统完全免费使用,无任何功能模块使用限制,在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源,在您使用过程中可以根据自已实际情况加以调整或修改,完全可以满足您的需求。强大且灵活 独创的多语言功能,可以直接在后台自由设定语言版本,其语言版本不限数量,可根据自已需要进行任意设置;系统各模块可在后台自由设置及开启;强大且适用的后台管理支
0
filter 属性适用于大多数块级和内联元素,尤其是:
例如给带背景图的 div 添加灰度效果:
.card {使用 filter: grayscale() 时需注意以下几点:
基本上就这些。grayscale() 是一种简单高效的视觉控制手段,常用于状态切换、视觉统一或交互反馈。以上就是在css中如何用filter:grayscale调整颜色的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号