为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定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. 精尽 MyBatis 源码分析 - MyBatis 初始化（一）之加载 mybatis-config.xml

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

  2. CTF练习（1）这是一张单纯的图片?

    1.练习平台http://123.206.31.85/challenges 2.图片下载后放进WInhex 最后安利一个  CTF资源库|CTF工具包|CTF工具集合 网站,里面工具很全,很方便   ...

  3. python学习-pickle模块(序列化)

    简介 1 python-pickle模块 该pickle模块实现了用于序列化和反序列化Python对象结构的二进制协议. "Pickling"是将Python对象层次结构转换为字节 ...

  4. YARN-MapReduce的作业提交流程

    YARN分布式资源管理系统 组成: ResourceManager:YARN的资源管理器,主节点,通过NodeManager管理集群中所有的资源 NodeManager:YARN的节点管理器,从节点, ...

  5. 【硬件】HDMI接口HPD原理

    目录 一.什么是HPD? 二.HDMI的HPD(热插拔)原理 三.HDMI源端对HPD信号有什么要求? 由于项目需要通过HDMI获取EDID的数据,需要学习一下其获取的工作原理,所以在这里记录下. 一 ...

  6. Word 2013中如何直接调用MathType

    相信有很多用户已经发现在使用Word 2013编辑文档时MathType无法直接调用,但是点击文档中的公式时能够跳出MathType公式编辑窗口,那么这是怎么回事呢?其实,这一问题也不是没有办法解决的 ...

  7. python办公入门4：xlrd操作excel行

    操作excel行 1 #通过索引获取操作行 2 sheet=data.sheet_by_index(0) 3 #获取当前sheet下的有效行数 4 print(sheet.nrows) 5 #获取某一 ...

  8. Spring中的Mybatis

    1. 前言 在构建一个web应用时基本的套路就是SSM,其中的M就是Mybatis. Mybatis作为一款开源的ORM框架, 由于其易于上手的特点成为当下比较流行的ORM框架,当然它还有一款插件能够 ...

  9. 【2020.12.01提高组模拟】卡特兰数(catalan)

    题目 题目描述 今天,接触信息学不久的小\(A\)刚刚学习了卡特兰数. 卡特兰数的一个经典定义是,将\(n\)个数依次入栈,合法的出栈序列个数. 小\(A\)觉得这样的情况太平凡了.于是,他给出了\( ...

  10. JZOJ2020年8月13日提高组反思

    JZOJ2020年8月13日提高组反思 T1 打了3h+,然后自己的小数据都没过 果断选择交对拍的暴力 下次还是注意时间吧 T2 一下三题都没时间打了 看了题目觉得特别烦人(有式子) 再看发现式子类似 ...