论坛首页 Web前端技术论坛

在Chrome/Firefox等非IE浏览器让网页变灰效果

浏览 3051 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-12-08  
整个网页变灰色,在IE下可以用下面的CSS解决:

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }   


但是非IE浏览器,比如Chrome、firefox等没有IE自带的滤镜,那又如何做网页变灰效果呢?在网上发现一个能实现这个效果的js,这里分享一下,先来看看效果:Demo 入口

使用起来相当简单:
/*
window.onload = function() {
	grayscale(document.getElementsByTagName('html'));  
};
*/

function gray_change(){
	grayscale(document.getElementsByTagName('html'));
}

function reset_color(){
	window.location.reload();
}


虽然页面是变灰了,不过蛮灰的过程有点慢,估计应该是系统资源消耗是有些大了。

Chrome下还好,1-2秒左右,Firefox下则停顿时间好长。
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics