页面变成黑白的CSS代码

最新推荐文章于 2022-12-02 16:09:24 发布

最新推荐文章于 2022-12-02 16:09:24 发布 · 213 阅读

本文介绍了一种在网页中实现灰度显示效果的方法，通过使用CSS滤镜属性，可以轻松地为整个网页添加灰度效果。该方法兼容多种现代浏览器，并提供了针对不同版本Internet Explorer的解决方案。

 1 <style>
 2     html
 3     {
 4         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 3.5+ */
 5         -webkit-filter: grayscale(100%); /* chrome+ */
 6         filter: grayscale(100%); /* 未来浏览器 */
 7         filter: gray; /* ie7-9 */
 8         filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie7-9 */
 9     }
10 </style>