网页变灰 firefox ,IE chrom 心得

起床之后，看网页到处都是支持雅安，然后各种网页灰

去查阅了资料，好多网页，IE都是灰色的，但牵涉到firefox  chrom 就不变灰啊，各种变灰的级别都有

因为在家里，就随便找了一个项目，然后参阅网站上的效果

发现怎么弄firefox 都不能全部变灰，接着查资料，翻到最后，终于醒悟，其实那个 

window.onload=function(){  //网页变灰
grayscale(document.body); 

}

　这个写法是有效果的，至少 firefox 浏览器下，部分是变灰色了，让我不解的是为嘛只有一部分呢，在想了下，原来是因为其他不变灰的地方，都是图片（因为做的各种形状的效果，就都用的图片） 好吧，终于找到了原因

 特写，此偏牢记：

    谨记：能避免用图片的就不要用图片，尽量用CSS效果来实现，这方便修改拓展各种清空 

现在上网页变灰的效果，（支持IE,CHROM）如果你网页有通用的css 文件，只需在上面加

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); /* 支持IE的滤镜 */
        -ms-filter: grayscale(100%); /* 支持chrom变灰  */
 } 

支持FIREFOX的效果会稍微麻烦些：需要引用JS模拟滤镜的效果

<script src="grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){  //网页变灰
grayscale(document.body); 

}

</script>

结语：如若需要强制性的执行变灰效果，只能调用Js 以及修改 部分牵涉到的背景图片，还有IE ，chrom 下面 加载滤镜效果不是特别理想，至少加载起来不轻松

温馨提示：每个人视情况而定，酌情处理想要的变灰吧。