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

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

这几天大家的电脑、手机各种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培训,软件测试培训等

• 词条

  词条说明

• 如何选择靠谱的IT培训机构

  IT行业作为现在高薪热门行业，很多同学为了拓宽自己的事业道路，选择参加IT培训。但市面上的IT培训机构很多，不知道如何选择?下面知了堂专业IT培训机构小编教您一些选择IT培训机构的方法。1、选择注重教学质量的IT培训机构。有的IT培训机构不在乎学生能不能学好，只想着赚钱。在招生阶段不管什么基础什么学历通通接收，这是对学员不负责任的表现。如果一个培训机构注重教学质量注重就业率，一定会设置一定的招生门

• 真正的0基础如何学JAVA

  真正的0基础如何学JAVA，有很多方法来学习，小编在这里只说一种较适合it行业的新手。Java学习教程+敲击代码+做笔记+大小学习循环，四者缺一不可。敲打代码：看十次不如敲一次，你要做的就是去敲打代码，记住，当你敲不出的时候，不到万不得已就别再看录像了!此刻不敲门，等待何时?记录：比敲击代码更重要。自己书写学习心得及理解(不用背代码)，代码敲击后可忘记，记录知识点及了解。一、学时按大小分，**考虑

• Java培训的费用大概多少

  很多人转行学习Java开发技术，报名参加培训班是比较快捷的方式，大家普遍关心Java培训的费用，下面知了堂Java培训机构带大家一起了解一下java培训机构的收费标准是什么样的?java培训一般多少钱?国内各地的JAVA培训学费的市场不一样，各地情况不一样，不能一概而论的，毕竟是学一门本领，要花不少时间，钱方面也不会少，报java培训机构价格是在一万五到两万块钱左右。一般来说，针对大学起点的培训学

• 零基础小白如何学好Java

  零基础小白怎样才能学好Java，这是大多数java初学者比较关心的问题。参加线下培训或线上听课，老师讲能听懂，但是一到自己写就不会了。若是看书，能看懂，写更是问题。那么，零基础如何才能学好Java呢?需要我们课前预习课后复习，反复不断地练习，保持严谨的态度，这样才能加深面对代码的印象。零基础小白学好Java开发技术，知了堂Java培训机构分享一些学习方法。一、学好基本语法，弄清Java的特点。学习