为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使馆下半旗致哀，全国停止公共娱乐活动，4月4日10点开始，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

想到以往默哀日访问网站时发现整站会变成全灰，即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力，那会不会有css可以直接处理所有的元素将他们变灰，随即想到了css3的filter（滤镜），并也证实了这一想法的可行性。

将下面代码直接放人<head></head>之间即可

<style>

html{

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter:grayscale(100%);

-moz-filter:grayscale(100%);

-ms-filter:grayscale(100%);

-o-filter:grayscale(100%);

filter:grayscale(100%);

filter:gray;

}

</style>

　　

简单的一段css代码让全站变灰，网站哀悼代码的更多相关文章

  1. css+js整站变灰（兼容IE7+）

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

  2. css全站变灰

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

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

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

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

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

  5. Web开发者不容错过的10段CSS代码

    Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 本文将分享20段非常专业的CSS2/C ...

  6. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  7. 简单的转盘抽奖——CSS动画优化

    前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...

  8. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  9. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

随机推荐

  1. CTDB与LVS搭建集群

    搭建一个采用lvs进行负载均衡的CTDB集群,整个集群的架构是采用如图所示 在上图所示的架构图中,后端采用的集群是我们的存储,集群存储的三个samba服务器的node在作为CTDB的节点的同时,也是运 ...

  2. php 序列化和反序列化的作用及使用

    1.序列化是什么意思呢? 序列化就是把本来不能直接存储的数据转换成可存储的数据,并且不会丢掉数据格式 serialize(); 2.反序列化是什么意思呢? 其实就是字面的意思,把序列化的数据,转换成我 ...

  3. 【惊喜】Github爆火的java面试神技+java核心面试技术已开发下载，大厂内都传疯了！

    前言 今年,由于疫情的影响,很多互联网企业都在缩减招聘成本.作为程序员,原本这两年就面临竞争激烈.年龄危机的问题,而现在的求职局面又完全是企业在挑人的状态. 所以最好能在空闲的时候看看大厂相匹配的技术 ...

  4. 新鲜出炉！凭借着这份面试宝典，我终于拿下了字节跳动的offer！

    前言 我做Java也十来年了,现在也算是中层管理,每次招聘都需要找一些面试题,干脆自己整理了一份,这份面试宝典是从我 去年开始收集的,一方面是给公司招聘用,另一方面也是想用它,来挖掘自己在 Java ...

  5. ssh命令的常用使用场景

    目录 一.最简单的登陆 二.登陆+执行命令 三.端口转发 四.参考 一.最简单的登陆 就是简单登陆一下主机,默认端口22 ssh {hostname}@{host_ip} ➜ Charles ssh ...

  6. Vuex form表单处理, 比官网更好的办法

    Vuex form表单处理, 比官网更好的办法 问题, 当使用vuex的state作为表单的v-model元素, 虽然简单粗暴, 但这种修改没有经过mutation方法. 在严格模式下会抛出错误 目录 ...

  7. Java（8）I/O

    目录 一.File类 1.File类概述 2.File类实例化 3.File类常用方法 二.IO流的原理 1.IO流的原理 2.input和output的理解 三.IO流的分类 1.分类 2.图示 3 ...

  8. 配置jdb

    目录 注:1)查看当前Linux系统是否已经安装java 1.把jdk文件的压缩包拖入虚拟机 2.找到刚刚拖拽的文件 3.在usr/local下创建jdk的文件夹 4.解压jdk的文件,并存放在刚刚创 ...

  9. 电脑adb命令给智能电视安装APK

    配置环境 1.电脑需要配置好adb系统环境 具体操作较复杂,请自行百度. 2.电视打开adb命令 在电视的关于界面通过遥控器「上上下下左右左右」进入工厂模式,在「高级设置」-「其他」中的「adb开关」 ...

  10. Django踩坑记录3

    路径如下: admin.py的代码: from django.contrib import admin from sign.models import Event,Guest # Register y ...