源自北京大学，北大青鸟特色专业，科学管理，就业更好
点击数：60 来源：北大青鸟_河南北大青鸟_郑州北大青鸟厚铂(郑州鹤立中专校区) 发布于：2022-12-06
在一些特殊时期我们需要把整个网站变灰，是如何实现整体变灰的呢？
CSS3 filter(滤镜) 属性
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
浏览器支持：
grayscale()：
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
来看一下效果：
可以看到，网页中的图片、css样式、视频都已经变灰。
IE浏览器
filter: gray;
这个属性直接加载html上是不管用的，如果需要图片变灰可以只将样式作用于img标签，或者用*通配符作用于所有元素，这样整个网站就会变灰。
经测试，在IE7-9都是没问题的，IE9以上不能生效。
通用方案
在页面引入js文件：
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
然后：
grayscale(document.getElementsByTagName("img"));
或者直接这样：
grayscale(document.getElementsByTagName("html"));
实现原理：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法，然后对每个像素点进行灰度转换。
因此，在现代浏览器下，对于该方法，图片的灰度处理有两个局限性：
1. 速度。300*300这张一般般大小的图片变灰就要数秒之久；
2. 跨域。安全性机制，无法转换跨域的图片为黑白色。
（内容改编自网络，如侵权请联系删除）
联系我们
