让网站所有元素变成灰色调，全浏览器支持，使用了滤镜，比较吃性能，建议作临时方案使用。

实现效果（点击下面的按钮）：

这里放一张图片作为效果展示：

其CSS代码如下：

body{

  -webkit-filter:grayscale(100%);

  -moz-filter:grayscale(100%);

  -ms-filter:grayscale(100%);

  -o-filter:grayscale(100%);

  filter:grayscale(100%);

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

  filter:gray;

  -webkit-transform: translateZ(0);

}

来源：网站变灰 CSS

【CSS Demo】网站页面变灰的更多相关文章

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

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

  2. 怎么让让整个HTML页面变灰

    怎么让让整个HTML页面变灰 其实很简单,我们只需要一句话. html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1 ...

  3. JS实现当前页弹出窗口，且页面变灰不可操作

    使用JS在当前页面在div中加载弹出窗口,并让当前页面变灰不可操作. 加载弹出窗口的div需将宽高设置成整个页面的大小,以覆盖当前页面的内容. opacity:0.6: 页面可见度设置为0.6(1为完 ...

  4. 简单的一段css代码让全站变灰，网站哀悼代码

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动.在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日1 ...

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

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

  6. 使整个页面变灰的css代码

    * { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=); -webkit-filter: grayscale(%); - ...

  7. 通过Nginx使全站页面变灰

    摘要:某大神的博客说“在Nginx负载均衡服务器上,利用sub_filter指令在输出的HTML中增加一行:<style type="text/css">html {f ...

  8. 转载网易博客：整理各大网站让网站变灰的css代码

    2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部 ...

  9. 让页面整体变灰css设置

    上次看到某人去世了,百度就把相应介绍某人的信息页面全部灰掉,于是寻找到了种简单的方法,只需设置html html { filter: grayscale(100%); -webkit-filter: ...

随机推荐

  1. ural1989 单点更新+字符串hash

    正解是双哈希,不过一次哈希也能解决.. 然后某个数字就对应一个字符串,虽然有些不同串对应同一个数字,但是概率非常小,可以忽略不计.从左到右.从右到左进行两次hash,如果是回文串,那么对应的整数必定存 ...

  2. Fiddler抓包9-保存会话（save）

    前言 为什么要保存会话呢?举个很简单的场景,你在上海测试某个功能接口的时候,发现了一个BUG,而开发这个接口的开发人员是北京的一家合作公司.你这时候给对方开发提bug, 如何显得专业一点,能让对方心服 ...

  3. 有关cookie

    cookie     会话跟踪技术               <script>             /*                 cookie 全称  会话跟踪技术.     ...

  4. 二.hadoop环境搭建

    目录: 目录见文章1 文章:官方文档hadoop2.7.4 目的 这篇文档的目的是帮助你快速完成单机上的Hadoop安装与使用以便你对Hadoop分布式文件系统(HDFS)和Map-Reduce框架有 ...

  5. 存储过程+Jquery+WebService实现三级联动：

    首先看一下数据库的设计:

  6. Ext.js入门：模板（四）

    1.Ext.DomHelper简介2.Template语法使用简介3.Template简单应用4.Template中使用转换函数5.使用模板的自定义接口6.XTemplate应用 一:Ext.DomH ...

  7. BZOJ1592 POJ3666 [Usaco2008 Feb]Making the Grade 路面修整 左偏树 可并堆

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ3666 题目传送门 - BZOJ1592 题意概括 整条路被分成了N段,N个整数A_1, ... , ...

  8. BZOJ1051 [HAOI2006]受欢迎的牛 Tarjan 强连通缩点

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1051 题意概括 有n只牛,有m个羡慕关系. 羡慕关系具有传递性. 如果A羡慕B,B羡慕C,那么我们 ...

  9. 【Java】 剑指offer(67) 把字符串转换成整数

      本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 请你写一个函数StrToInt,实现把字符串转换成整数这个功能 ...

  10. ZooKeeper典型应用场景：分布式锁

    分布式锁是控制分布式系统之间同步访问共享资源的一种方式.如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源,那么访问这些资源的时候,往往需要通过一些互斥手段来防止彼此之间的干扰,以保证一致 ...