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. 什么是babel

    什么是babel babel是一款基于node开发的工具,其功能是对es6的新语法和新特性进行转码.

  2. 工具-Redis-与Python一起使用(99.6.3)

    @ 目录 1.安装 2.使用 以下为对应的方法 3.使用string为例子 关于作者 1.安装 pip install redis 2.使用 pip install redis from redis ...

  3. 为什么 HashMap 的容量大小要设置为2的N次方?

    原文链接:https://www.changxuan.top/?p=1208 前两天,我在一位同学提交中看到了下面这样的一行代码,让我很是惊讶. Map<String, String> t ...

  4. Maven史上最全的pom.xml详解

    下面主要是借鉴 官网的资料 收集而来 主要是为了讲解,用到的很少,但是还是需要了解 ,重点是方便查验资料 <project xmlns="http://maven.apache.org ...

  5. C#中string类型必填的诡异问题

    背景 ASP.NETCore3.0项目,使用Swagger接口文档. 之前的项目都是Swashbuckle.AspNetCore-5.0.0 新项目想尝尝鲜,用最新版Swashbuckle.AspNe ...

  6. 读取xlsx文件的内容输入到xls文件中

    package com.cn.peitest.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...

  7. java位运算符生产环境应用分析

    在实际应用场景中 特别是 1,2,4,8,16 这种2的整数次幂的数字,因为具有非常典型的特点 首先是 1.2.4 这几位数了,因为他们的特点就是二进制只有一个为 1 的位,其他位都是 0,并同其他数 ...

  8. Linux 时间同步 04 ntp时间同步

    Linux 时间同步 04 ntp时间同步 目录 Linux 时间同步 04 ntp时间同步 安装ntp 配置与外部时间服务器进行时间同步的客户端主机 配置其他客户端与以上客户端主机时间同步 验证查看 ...

  9. 第十五章节 BJROBOT cartographer 算法构建地图【ROS全开源阿克曼转向智能网联无人驾驶车】

    建地图前说明:请确保你的小车已经校正好 IMU.角速度.线速度,虚拟机配置好 ROS 网络的前提进行,否则会造成构建地图无边界.虚拟机端无法正常收到小车主控端发布的话题数据等异常情况!! 1.把小车平 ...

  10. [学习笔记]尝试go-micro开发微服务<第一波>

    平时项目都是基于c++,lua,node, 现在打算开始自学开发微服务;   也顺带磨砺下go和docker 前期准备 1. 有golang编程基础 本系列文章是基于有golang编程基础,有过实际开 ...