源自北京大学,北大青鸟特色专业,科学管理,就业更好
首页 > 校园动态 >
如何实现网站变灰?

点击数:60 来源:北大青鸟_河南北大青鸟_郑州北大青鸟职英(郑州鹤立中专校区) 发布于:2022-12-06

在一些特殊时期我们需要把整个网站变灰,是如何实现整体变灰的呢?


CSS3 filter(滤镜) 属性


html{

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

浏览器支持:

grayscale():

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

来看一下效果:

可以看到,网页中的图片、css样式、视频都已经变灰。

微信图片_20221206155747



IE浏览器


上面所说的css3属性IE浏览器并不支持,其实这样做已经覆盖了大部分浏览器

filter: gray;
这个属性直接加载html上是不管用的,如果需要图片变灰可以只将样式作用于img标签,或者用*通配符作用于所有元素,这样整个网站就会变灰。

经测试,在IE7-9都是没问题的,IE9以上不能生效


通用方案


如果你执意所有的浏览器都有这个效果,可以通过Greyscale.js实现:

在页面引入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. 跨域。安全性机制,无法转换跨域的图片为黑白色。



(内容改编自网络,如侵权请联系删除)

联系我们

电话:19937760761
QQ:2767291305
微信:19937760761
地址:郑州南三环凤栖路交叉口东南240米


升学案例

数十家优质大学合作