Talk is cheap , show me your code!
欢迎来到付振南Java博客,让我们一起学习Java吧!

让网站一键变灰的实现原理

2020年4月4日,为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

深切哀悼抗疫烈士和逝世同胞!沉痛哀悼因疫情失去宝贵生命,奉献祖国的英雄!!!

我们作为技术人,肯定要了解了解通过什么原理来实现站点一键变灰的。

第一种,有的网站管理系统有这个功能,比如现在这个博客站点,后台是有这个功能的。

第二种,修改网页的css样式文件,在html的样式加一个灰色过滤器就行了,别忘了图片也需要哦,代码如下:

html{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  _filter: none;
}

第三种,既然可以修改css代码,我们当然也可以直接在网页的<head>标签内部加入css代码:

<style>
  html{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
  }
</style>

第四种,既然我们可以加在head标签里,我们当然可以在html标签通过内联样式的形式写进去啦,内联样式的优先级最高。

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

当然啦,我们也可以在style里老老实实写样式呀!

body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}

以上就是网页端的最简单的实现方式了,但是像百度,京东,斗鱼等平台,他们的实现方式可能更复杂一点,业务不同实现方式也不同,大致原理知道就行,在最顶层加一个灰色的滤镜即可。

当然,app的实现方式更复杂一点,我涉猎的也不多,大致应该也是写一个GrayFrameLayout。app的实现方式这里提供鸿洋大佬的文章。

赞(0) 打赏
未经允许不得转载:付振南Java博客 » 让网站一键变灰的实现原理

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏