悼念日、纪念日网站变灰浏览器全兼容方案

/*
* 网站变灰代码
* 支持firefox/chrome、360极速模式
*/
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'></fecolormatrix></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
/**
*  ie7-ie9
*/
body{
   filter: grayscale(100%);/*火狐*/
       -webkit-filter:grayscale(100%);/*chrome*/
       filter:gray; /*IE7-9*/
}
/*
* ie10+
*/
[grayscale.js](https://github.com/fayeguo1030/grayscale/blob/master/grayscale.js)
把grayscale.js下载下来放到本地的js目录中,用之前引用一下;
<script type="text/javascript" src="./grayscale.js"></script>
<script type="text/javascript">
window.onload=function(){
   grayscale(document.body);
}
</script>

css+js都已经引入之后,清缓存刷新页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下是常用的代码收集,学习用。转自[豪情博客园] (http://www.cnblogs.com/jikey/p/...
    自由加咖啡阅读 1,128评论 0 1
  • 1、图像黑白处理 支持Chrome18.0、Firefox35、Safari6.0、oprea15.0以上版本以及...
    长城_changcheng阅读 348评论 0 2
  • 写在从深圳返家的途中。呆在一个地方已经至少两个钟了,看来十一要在路上与众位萍水相逢的同乘们一起度过了。 好了,话不...
    沐酒鸿江阅读 358评论 0 0
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 1,350评论 0 3
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,350评论 0 0