css全站变灰
2020年4月4日全国哀悼日这一天,我发现不少网址都变灰了,我第一想法就是怎么做到的?不可能换素材整个网址重做一遍吧?后面发现是用的其实是css的filter滤镜:
grayscale可以将图像转化为灰度图像:
html {
filter: grayscale(.95);
}
视频、canvas之类都会变灰:


用egret做的游戏也变灰了。
那除此之外,filter还有什么作用呢?
可以用它的brightness属性来做移动端标签的点击阴影效果,不用设计再出一张图啦:
brightness:可以控制图像的明亮度,默认值为1
.app-link {
filter: brightness(.8);
}
效果:

css全站变灰的更多相关文章
- 简单的一段css代码让全站变灰,网站哀悼代码
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动.在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日1 ...
- 全站变灰的CSS代码-适合特殊时刻哀悼
将下面CSS代码应用到HTML标签或者是BODY标签 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.o ...
- 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码
<style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...
- 转载网易博客:整理各大网站让网站变灰的css代码
2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部 ...
- css+js整站变灰(兼容IE7+)
原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...
- css gray,grayscale,css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- 【CSS Demo】网站页面变灰
让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-fil ...
- CSS使图片变灰
为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...
- 实现JQuery EasyUI右键菜单变灰不可用效果
使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...
随机推荐
- 一文说通C#中的异步迭代器
今天来写写C#中的异步迭代器 - 机制.概念和一些好用的特性 迭代器的概念 迭代器的概念在C#中出现的比较早,很多人可能已经比较熟悉了. 通常迭代器会用在一些特定的场景中. 举个例子:有一个for ...
- react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)
第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件) #受控组件 简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onc ...
- Web服务器-正则表达式-小例子(3.1.2)
@ 目录 1.邮箱 2.手机号码 关于作者 1.邮箱 import re def main(): email = input("请输入一个邮件地址:") ret = re.matc ...
- 【入门必看】不理解「对象」?很可能有致命bug:简单的Python例子告诉你
简介:越来越多的人要在学习工作中用到『编程』这个工具了,其中很大一部分人用的是Python.大部分人只是做做简单的科研计算.绘图.办公自动化或者爬虫,但-- 这就不需要理解「指针与面向对象」了吗? 在 ...
- 【磁盘/文件系统】第二篇:标准磁盘分区流程针对fdisk(硬盘容量小于2T且分区数不能大于15个分区)
前奏:先插上一块磁盘(做了RAID的磁盘才能分区) 查看磁盘连上服务器没有,或者说是可以进行分区前奏 [root@PandaLi ~]# ll /dev/sd sda sda1 sda2 sda3 s ...
- 2.Redis info命令详解
命令 127.0.0.1:6379> info [server|clients|memory|stats|...] # Server redis_version:5.0.4 #redis版本 r ...
- java实体类和json串字段名称不一致或者与map中字段名称不一致使用注解转化
package yuanCheng; import java.text.MessageFormat; import java.util.ArrayList; import java.util.List ...
- js:表单校验(获取元素、事件)
1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...
- 变量提升(hoisting)
JavaScript的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行.这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting). con ...
- java内部类 之private 属性对其他对象的访问限制
public class InnerClass1 { private class Content { private int i; public int value() { // TODO Auto- ...