grayscale()将元素转为灰度图像，参数为百分比或0-1数值，100%完全黑白，0%保持原色，常用于图片、背景、SVG等视觉效果控制。
在CSS中，filter: grayscale() 用于将元素的颜色转换为灰度图像。它不会直接“调整”某种特定颜色，而是将整个元素的色彩饱和度降低到零，呈现出黑白效果。
基本语法
grayscale(值) 接受一个参数，可以是百分比或0到1之间的数值：
grayscale(100%) 或 grayscale(1)：完全灰度，无任何颜色 grayscale(0%) 或 grayscale(0)：保持原色，无变化 grayscale(50%) 或 grayscale(0.5)：部分灰度，保留一些色彩信息
常见用法示例
将图片变为黑白：
img {
filter: grayscale(100%);
}
鼠标悬停时恢复原色：
立即学习“前端免费学习笔记（深入）”；
Android如何使用WebService接口 中文WORD版
本文档主要讲述的是Android如何使用WebService接口；WebService是一种基于SOAP协议的远程调用标准。通过WebService可以将不同操作系统平台，不同语言、不同技术整合到一起。在OPhone SDK中并没有提供调用WebService的库，因此，需要使用第三方类库（KSOAP2）来调用WebService。在本文将介绍在OPhone中调用WebService的具体细节，并在最后给出一个完整的例子来演示如何使用KSOAP2来调用WebService。感兴趣的朋友可以过来看看
6 查看详情 img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0);
}
可应用的元素类型
filter 属性适用于大多数块级和内联元素，尤其是：
图片（img） 背景图（div 等容器） SVG 图标 视频（video 标签）
例如给带背景图的 div 添加灰度效果：
.card {
background-image: url(‘photo.jpg’);
filter: grayscale(70%);
}
注意事项
使用 filter: grayscale() 时需注意以下几点：
filter 会影响整个元素及其子元素的视觉呈现 若只想对背景图做灰度处理，可考虑用伪元素 + 背景叠加方式避免影响文字 兼容性良好，现代浏览器都支持，但旧版IE不支持基本上就这些。grayscale() 是一种简单高效的视觉控制手段，常用于状态切换、视觉统一或交互反馈。
以上就是在css中如何用filter:grayscale调整颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1005629.html
微信扫一扫 
支付宝扫一扫 
