兼容所有浏览器的页面黑白代码

最新推荐文章于 2025-04-09 10:59:55 发布

BJ_benjamin

最新推荐文章于 2025-04-09 10:59:55 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端之webPageMaking

本文链接：https://blog.youkuaiyun.com/cuew1987/article/details/8856932

前端之webPageMaking 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何通过CSS代码实现黑白滤镜效果，并详细解释了不同浏览器前缀的使用方法，确保跨浏览器兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
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");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}  #grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); }