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. Linux下安装mysql-5.7.24

    Mysql数据库的安装对于开发者来说,是我们必然会面对的问题,它的安装过程其实并不复杂,并且网络上的安装教程也非常多,但是对于新手来说,各种不同形式的安装教程,又给新手们带来了要选择哪种方式进行安装的 ...

  2. Shell脚本命令常用技巧

    如果一个命令只有一次输出,但想持续观察输出变化,使用watch -d -n1 'df -h'可行,df -h输出一次硬盘使用情况,用上面指令可以持续观察.-d表示相邻输出如果有差异要高亮标记,-n1表 ...

  3. db2常用操作

    1. db2建立远程节点编目及删除 db2 catalog tcpip node nodeName remote remoteIp server remotePort db2 list node di ...

  4. python之列表操作的几个函数

    Python中的列表是可变的,这是它却别于元组和字符串最重要的特点,元组和字符串的元素不可修改.列举一些常用的列表操作的函数和方法. 1,list.append(x),将x追加到列表list末尾: 1 ...

  5. x264编码demo定制修改介绍

    x264编码器,提供了两个demo来验证编码功能:一个是大而全的x264.c,另外一个是简洁版的example.c. 其中,前者demo,可以配置很多编码参数,但太冗长繁杂,对初学者不太友好.  后者 ...

  6. Zookeeper什么,它可以做什么?看了这篇就懂了

    前言 什么是ZooKeeper,你真的了解它吗.我们一起来看看吧~ 什么是 ZooKeeper ZooKeeper 是 Apache 的一个顶级项目,为分布式应用提供高效.高可用的分布式协调服务,提供 ...

  7. 2021年第一个flag

    2021年开始更新本文列出的系列文章,根据书籍和自己的理解整理出spring框架的相关的学习 Spring 的设计理念和整体架构 学习目标 Spring的各个子项目 Spring的设计目标 Sprin ...

  8. 微服务 - 服务消费(七)Feign

    介绍 Spring Cloud Feign是一套基于Netflix Feign实现的声明式服务调用客户端.它使得编写Web服务客户端变得更加简单.我们只需要通过创建接口并用注解来配置它既可完成对Web ...

  9. 配置简单的拦截器java中

    springMVC.xml文件中==== <!-- 拦截器 --> <mvc:interceptors> <mvc:interceptor> <mvc:map ...

  10. javascript中如何截取字符串?

    JavaScript中截取字符串有三种方法,分别是substring(),substr(),split(). 方法1:使用substring() substring()方法用于提取字符串中介于两个指定 ...