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. [日常摸鱼]Luogu2521[HAOI2011]防线修建-set维护凸包

    https://www.luogu.org/problemnew/show/2521 题意:维护一个上凸包:删点,查询周长 很容易想到把问题转换为离线:先读入全部操作,记录下最后剩下的点,倒着加点来维 ...

  2. 从苹果BigSur官网学点东西

    从苹果BigSur官网学点东西 Awsome配色 这个 蓝紫渐变大底 + 简洁的 矩形状字块 + 粗细层次字形,看着就蛮舒服. 看看css配色: .section-hero div[data-comp ...

  3. C# 学习第七天

    P96 面向对象的概念 ①先有的 面向过程 --------> 然后才衍生出面向对象的思想 ②面向过程:面向的是完成这件事儿的过程,强调的是完成这件事儿的动作 比如说 把大象塞进冰箱去 ③面向过 ...

  4. 网络知识扫盲——DNS

    参考文章链接  : https://baijiahao.baidu.com/s?id=1668393227924896391&wfr=spider&for=pc 一.DNS 是什么? ...

  5. PHP文件包含及使用伪协议getshell

    file:// - 访问本地文件系统 http:// - 访问 HTTP(s) 网址 ftp:// - 访问 FTP(s) URLs php:// - 访问各个输入/输出流(I/O streams) ...

  6. 流程控制之☞ while 和 for 的故事

    学习三连鞭... 什么是循环? 为什么要有循环? 如何用循环? 循环的基本语法:while   和     for 先来看while循环: while条件:首先得是个循环体. 1.如果条件为真,那么循 ...

  7. 5. 穿过拥挤的人潮,Spring已为你制作好高级赛道

    目录 ✍前言 版本约定 ✍正文 默认转换器注册情况 StreamConverter 代码示例 使用场景 兜底转换器 ObjectToObjectConverter part1:快速返回流程 part2 ...

  8. 发起一个开源项目:基于 .NET 的博客引擎 fluss

    今天我们发起一个开源项目,它的名字叫 fluss,fluss 是 river 的德语. 百川归海,每一个博客就如一条河流,输入的是文字,流出的是知识,汇入的是知识的汪洋大海. 川流不息,fluss 是 ...

  9. vuetify 属性集合

    1.v-form 组件具有 three 功能,可以通过在该组件上设置 ref 来访问它们. ref 允许我们访问组件上的内部方法,例如 <v-form ref="form"& ...

  10. 解决github下载速度慢问题

    众所周知,GitHub是一个巨大的开源宝库,以及程序员和编程爱好者的聚集地,包括我之前推荐的诸多优秀的开源项目全部都是位于GitHub上.但是每当我们看到优秀的开源项目,准备去 下(bai)载(pia ...