成都列举网 > 教育培训 > 电脑/网络 > 网页整体变灰前端开发一定会的三种方法
成都
[切换城市]

网页整体变灰前端开发一定会的三种方法

更新时间:2022-12-02 11:23:56 浏览次数:72次
区域: 成都 > 武侯 > 武侯周边
类别:软件工程师培训
地址:成都高新区益州大道中段1858号(天府软件园G8-7楼)
  这几天大家的电脑、手机各种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方法,然后对每个像素点进行灰度转换。

  网页整体变灰怎么实现?以上就是知了姐整理的三种常见方法,希望能够对你的学习有帮助。关注成都知了堂前端培训机构,带你了解更多前端相关问题。
成都电脑/网络相关信息
java初学者应该怎么学
武侯-武侯周边
2022-12-09
2022-12-08
cisp证书含金量如何
武侯-武侯周边
2022-12-07
2022-12-07
数据库必看书籍有哪些
武侯-武侯周边
2022-12-06
真正的0基础如何学JAVA
武侯-武侯周边
2022-12-05
2022-12-01
成都知了汇智科技有限公司
注册时间:2022年03月01日
UID:735013
---------- 认证信息 ----------
手机已认证 企业已认证
查看用户主页