网页整体变灰怎么实现,web开发一定会的三种方法

时间：2022-12-02作者：成都汇智知了堂科技有限公司浏览：170

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

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

html{

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

filter: grayscale(**);

}

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

)的可视效果(例如：模糊与饱和度)。




浏览器支持：

grayscale()：

将图像转换为灰度图像。值定义转换的比例。值为**则完全转为灰度图像，值为0%图像无变化。值在0%到**之间，则是效果的线性乘子。若未设置，值默认是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方法，然后对每个像素点进行灰度转换。

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


成都汇智知了堂科技有限公司专注于网络安全培训,Java培训,软件测试培训等

• 词条

  词条说明

• 成都网络安全培训机构怎么选

  成都网络安全培训机构有上百家，其中有好的也有不好得，需要我们多方比较参考才能选择出较适合我们自己得培训机构，那么成都网络安全培训机构怎么选?这一点尤其重要。关于网络安全培训如何选择一家靠谱的。知了堂建议从几个方面着手。一是师资，建议大家带着有一定工作经验的朋友，实地去了解师资，现场一对一交流，老师好不好一下子就能区分出来。二是课程设置。三是看学习期间是否有实战平台练习，这一点尤其重要。知了堂成都网

• 在二三线城市，Web前端工程师好找工作吗

  随着互联网+时代的到来传统行业和互联网的相互融入日渐增加，它们对前端开发人员需求量也越来越大，工资待遇也很可观。在北上广这些*城市招聘的岗位多，机会自然也更多一些。但如果在二三线城市，Web前端工程师好找工作吗?薪资待遇怎么样?其实在二三线城市，相应的岗位少一些，要想找到合适的工作有一定的难度。而且，参加培训班出来的人员比自学人员在求职方面更受欢迎。相比自学，参加Web培训的人员在工作中更得心应

• 学Java好还是学前端好,知了堂从两者的薪资和学习过程详细分析

  很多同学不知道学习Java好还是前端好，这两门技术都是目前火热的技术，至于学哪个好，知了堂小编从三个方面为您详细分析一下。一、学习过程对于初学者来说，没有太多的编程基础，Java入门难度要比前端高，前端开发学的是直接给用户看的界面代码，每敲一行代码，实际的效果就能实时展现在页面上，这样的成就感可以加深对代码的兴趣，所以在培训机构里学习前端HTML、CSS的基础知识成为学前预科。Java是后端语言，

• 零基础如何转行软件测试工程师

  很多学员认为，IT行业薪资高、待遇好，而且学习软件测试的门槛低。现在很多企业软件质量的要求越来越高，测试也越来越受到重视。那么，零基础如何转行做软件测试工程师呢?需要掌握哪些知识?快跟随知了堂小编一起了解一下吧!零基础转行测试首先需要学习哪些内容呢1、认识软件测试了解软件测试的概念,掌握软件测试是干什么的，熟悉软件测试的基础理论和测试方法，了解测试的生命周期，测试流程，在项目中的日常工作主要做什么