2020年4月4日全国哀悼日这一天,我发现不少网址都变灰了,我第一想法就是怎么做到的?不可能换素材整个网址重做一遍吧?后面发现是用的其实是css的filter滤镜:

grayscale可以将图像转化为灰度图像:

html {
filter: grayscale(.95);
}

视频、canvas之类都会变灰:

用egret做的游戏也变灰了。

那除此之外,filter还有什么作用呢?

可以用它的brightness属性来做移动端标签的点击阴影效果,不用设计再出一张图啦:

brightness:可以控制图像的明亮度,默认值为1

.app-link {
filter: brightness(.8);
}

效果:

css全站变灰的更多相关文章

  1. 简单的一段css代码让全站变灰,网站哀悼代码

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动.在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日1 ...

  2. 全站变灰的CSS代码-适合特殊时刻哀悼

    将下面CSS代码应用到HTML标签或者是BODY标签 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.o ...

  3. 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...

  4. 转载网易博客:整理各大网站让网站变灰的css代码

    2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部 ...

  5. css+js整站变灰(兼容IE7+)

    原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...

  6. css gray,grayscale,css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  7. 【CSS Demo】网站页面变灰

    让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-fil ...

  8. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  9. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

随机推荐

  1. idea导入配置SSM项目,并进行打包

    idea确实是一个功能强大的开发工具,但是配置项目太复杂,每次都要花费很长的时间在配置上. 关于SSM项目导入,配置,打包,看这篇就够了,百试不爽.

  2. 使用plsql 连接oracle数据库

    1. 首先,需要下载oracle数据库的客户端,因为plsql是32位的,所以推荐下载32位的oracle数据库客户端呢 2. 将客户端解压到没有中文目录的文件夹下. 3. 在plsql中指定orac ...

  3. mini-web框架-装饰器-总结1(5.3.1)

    @ 目录 1.说明 2.代码 关于作者 1.说明 原则:开放封闭 可以扩展,但是不可以修改.也就是说软件对扩展开放,对修改关闭. 运用技术:闭包 一共两种方法,一个使用闭包,一个使用类 使用多个装饰器 ...

  4. tep用户手册帮你从unittest过渡到pytest

    unittest和pytest是Python的2个强大的测试框架,经常用来做UI自动化或接口自动化.unittest是PyCharm的默认集成工具,也是我们大多数人入门自动化的首选框架.pytest提 ...

  5. iOS音乐电台类项目开发

    1.技术难度不是太大,代码大致如下 2.用到的一些第三方 ZFProgressView,pageController,RESideMenu,MJRefresh,MBProgressHUD,RNFros ...

  6. ASP.NET Core 3.1使用JWT认证Token授权 以及刷新Token

    传统Session所暴露的问题 Session: 用户每次在计算机身份认证之后,在服务器内存中会存放一个session,在客户端会保存一个cookie,以便在下次用户请求时进行身份核验.但是这样就暴露 ...

  7. 【扫盲】i++和++i的区别

    从学java开始,我们就听说过i++和++i的效果一样,都能使i的值累加1,效果如同i=i+1: 但是使用过程中,有和不同呢,今天我们来说说看. 案例一: int i=0; int j=i++; Sy ...

  8. 关于线程池(ThreadPoolExecutor)参数的浅析

    引子 线程池在项目中很常用,需要多个任务异步执行的地方我们都会去创建一个线程池. 我们看到 ThreadPoolExecutor源码中提供了更方便的工厂方法(Executors)使用. 提供方便应该是 ...

  9. 【SpringBoot—注解】@requestBody 与@requestparam;@requestBody的加与不加的区别

    一)首先说明xia @requestBody与@requestParam的区别 spring的RequestParam注解接收的参数是来自于requestHeader中,即请求头.都是用来获取请求路径 ...

  10. 手摸手带你用Hexo撸博客(二)之配置主题

    在上一篇博客手摸手带你用Hexo撸博客(一)中主要介绍了博客的初步搭建 今天我们继续讲如何在Hexo搭建的博客中应用主题 官网选择自己喜欢的主题 点击这里Hexo主题进入官网主题页面 然后选择自己喜欢 ...