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

最新推荐文章于 2024-03-04 21:22:25 发布

原创最新推荐文章于 2024-03-04 21:22:25 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端之webPageMaking 专栏收录该内容

14 篇文章

订阅专栏

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

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); }