为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定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. samba配置用户访问方法

    配置目的: 为了给指定用户一个独立访问目录 首先在samba服务器安装samba软件 $ apt-get install samba 然后配置独立访问用户 配置samba用户前提需要是linux的用户 ...

  2. 字典序问题(Java)

    Description 在数据加密和数据压缩中常需要对特殊的字符串进行编码.给定的字母表A由 26 个小写英文字母组成A={a,b,-,z}.该字母表产生的升序字符串是指字符串中字母按照从左到右出现的 ...

  3. Docker学习—Swarm

    前言: 前一篇<Docker学习-Machine>中对Machine 进行了学习,本篇继续学习Swarm,那么Swarm是什么呢,有什么用呢?接下来一步步了解. 一.什么是Docker-S ...

  4. [原题复现]百度杯CTF比赛 十月场 WEB EXEC(PHP弱类型)

    简介  原题复现:  考察知识点:PHP弱类型.  线上平台:https://www.ichunqiu.com/battalion(i春秋 CTF平台) 过程 看源码发现这个 vim泄露  下方都试了 ...

  5. zabbix的搭建及操作（1）server-client架构

    实验环境 Server端     Centos7:192.168.10.10  server.zabbix.com    可连外网 Agent 端     Centos7:192.168.10.20  ...

  6. 从这三方面优化你的电脑，保持Mac运行流畅

    使用着Mac系统的用户都知道,Mac OS的各方面性能都很好,特别是流畅性,有人说不用清理垃圾也能流畅地使用Mac,但这的确是夸张了.电脑使用的时间长了,它的性能总会越来越退步,这其中有着系统垃圾拖累 ...

  7. jQuery 第二章 实例方法 DOM操作取赋值相关方法

    取赋值相关方法:  .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...

  8. canvas 元素覆盖&穿透问题

    给网站添加canvas动态背景.完后发现有a标签无法点击,想到是canvas覆盖了(但有些是可以的).网上查找,有解决穿透的问题,但canvas的鼠标事件会无效.后发现是定位问题. canvas样式 ...

  9. @Transactional自调用问题

  10. 冲刺随笔——Day_Six

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...