科技热线
搜索
  1. 首页
  2. 列表
  3. 焦点
  4. 内容详情

世界热点评！网页整体变灰怎么实现？前端开发的三种方法

来源：东方资讯

这几天大家的电脑、手机各种app首页整体变灰，这种现象怎么实现呢?一起来看看前端开发一定会的三种方法。

网页整体变灰怎么实现?CSS3 filter(滤镜) 属性

html{


(资料图片)

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

filter: grayscale(100%);

}

filter 属性定义了元素(通常是

)的可视效果(例如：模糊与饱和度)。 浏览器支持：

grayscale()：

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

网页整体变灰怎么实现?IE浏览器

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

filter: gray;

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

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

网页整体变灰怎么实现?通用方案

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

在页面引入js文件：

然后：

grayscale(document.getElementsByTagName("img"));

或者直接这样：

grayscale(document.getElementsByTagName("html"));

实现原理：IE浏览器下是添加灰度滤镜，这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法，然后对每个像素点进行灰度转换。

网页整体变灰怎么实现?以上就是知了姐整理的三种常见方法，希望能够对你的学习有帮助。关注成都知了堂前端培训机构，带你了解更多前端相关问题。返回搜狐，查看更多

责任编辑：

标签：

推荐

财富更多》

动态更多》

热点