为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定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. Python_科学计算库

    说明:若没有训练级联表,则需要相关级联表才能实现功能 文字识别 # -*- coding: utf-8 -*- """ 简介:用样本训练数据,再识别 "&quo ...

  2. 信息收集之——旁站、C段

    旁站的概念 ​旁站指的是同一服务器上的其他网站,很多时候,有些网站可能不是那么容易入侵.那么,可以查看该网站所在的服务器上是否还有其他网站.如果有其他网站的话,可以先拿下其他网站的webshell,然 ...

  3. 通过Tomcat Manager拿shell

    一.通过弱口令登录Tomcat后台 二.制作木马.war 1安装JDK 2.写一个jsp小马(我的小马是6.jsp) 3.cmd进小马的目录,然后运行 jar cvf shell.war  6.jsp ...

  4. 一遍记住Java常用的八种排序算法

    1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...

  5. level2行情是什么意思？

    level2行情是由上海证券交易所推出的实时行情信息收费服务产品,主要提供在上海证券交易所上市交易的证券产品的实时交易数据,包括十档行情,买卖队列,逐笔成交,委托总量和加权价格等数据. 投资者根据其功 ...

  6. 精尽MyBatis源码分析 - SQL执行过程（二）之 StatementHandler

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  7. FL studio系列教程（十三）：如何在FL Studio步进音序器中制作节奏

    了解了FL Studio一些操作功能后,我们就要去用这些操作功能完成我们想要的作品.所以今天小编就来带领大家在FL Studio的步进音序器中制作出简单的节奏,与此同时大家也会了解到通道的几个基础功能 ...

  8. H5系列之drag拖放

    H5中, 有个属性,draggable="true", 这个属性呢(默认false),需要加在标签上,加上去该标签就可以拖动了, 看下gif图吧 默认的标签,是不能拖动的,但是有两 ...

  9. Spring 事件监听机制及原理分析

    简介 在JAVA体系中,有支持实现事件监听机制,在Spring 中也专门提供了一套事件机制的接口,方便我们实现.比如我们可以实现当用户注册后,给他发送一封邮件告诉他注册成功的一些信息,比如用户订阅的主 ...

  10. Java基础知识面试题（最详细版）

    刚刚经历过秋招,看了大量的面经,顺便将常见的Java常考知识点总结了一下,并根据被问到的频率大致做了一个标注.一颗星表示知识点需要了解,被问到的频率不高,面试时起码能说个差不多.两颗星表示被问到的频率 ...