设置网页为灰度模式参考代码

jasonijessy

于 2020-04-08 15:41:25 发布

阅读量664

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： html css js 前端

本文链接：https://blog.youkuaiyun.com/jasonijessy/article/details/105388970

Web前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用CSS设置灰度滤镜，并确保在多种浏览器中兼容显示，包括使用前缀兼容不同浏览器及通过JS增强IE10、11的支持。

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

通过设置CSS样式，可以兼容大部分的浏览器，代码如下：

html {  
 -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%);  
      -o-filter: grayscale(100%);  
         filter: grayscale(100%);
}
body {
         filter: gray;
}

如果需要兼容IE10、11的话，需要通过JS控制，引入grayscale.js：

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>

具体JS代码如下：

window.onload = function(){
    var el = document.getElementsByTagName("body");
    grayscale(el);
}