使用css实现图片黑白效果首选filter: grayscale()，其参数为百分比，0%为全彩，100%为全黑，如filter: grayscale(50%)可实现半灰效果；通过:hover伪类结合transition可实现鼠标悬停时平滑变黑白的效果；为兼容老旧浏览器，可使用filter:progid:dximagetransform.microsoft.basicimage(grayscale=1)（仅ie有效）或结合svg的fecolormatrix实现跨浏览器支持；还可叠加blur、contrast等滤镜增强视觉效果，并可通过css变量与javascript动态控制滤镜强度，但需注意性能影响，最终应根据兼容性与交互需求选择合适方案。
实现图片黑白效果，CSS的
filter: grayscale()
filter灰度转换
filter: grayscale()
filter: grayscale(50%)
:hover
立即学习“前端免费学习笔记（深入）”；
img {
transition: filter 0.3s ease; /* 添加过渡效果，让变化更平滑 */
filter: grayscale(0%); /* 初始状态为彩色 */
}
img:hover {
filter: grayscale(100%); /* 鼠标悬停时变为黑白 */
}是不是很简单？但别忘了，
transition
filter: grayscale()
当然有！虽然
filter: grayscale()
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
另外，还可以使用
color-matrix
img {
filter: grayscale(0); /* 初始彩色 */
}
img:hover {
filter: grayscale(1); /* 鼠标悬停时变为黑白 */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}这段代码考虑了各种浏览器的兼容性，包括IE、Firefox、Chrome和Safari。虽然看起来比较繁琐，但可以确保在各种环境下都能正常显示黑白效果。
CSS滤镜的强大之处在于可以叠加使用。比如，你可以在黑白效果的基础上添加模糊、对比度调整等效果，创造出更丰富的视觉效果。例如：
img {
filter: grayscale(100%) blur(5px) contrast(150%);
}这段代码会将图片转换为黑白，然后添加模糊效果，并增加对比度。你可以根据需要调整这些参数，创造出独特的视觉风格。需要注意的是，过度使用滤镜可能会影响性能，特别是在移动设备上。因此，在使用滤镜时要权衡效果和性能。
另外，还可以结合CSS变量，动态调整滤镜效果。比如，你可以定义一个CSS变量来控制黑白程度，然后通过JavaScript来修改这个变量，实现更灵活的交互效果。
总之，CSS实现图片黑白效果的方法有很多，
filter: grayscale()
以上就是CSS怎样实现图片黑白效果？filter灰度转换的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
762
收藏
