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

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

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

其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. gcd,lcm

    定理:gcd(a,b)*lcm(a,b)=a*b; 更相损减术:gcd(a,b)=gcd(b,a-b)=gcd(a,a-b) 欧几里得算法:gcd(a,b)=gcd(b,a mod b) 复杂度O(l ...

  2. 性能测试二十一：环境部署之mysql

    在正常工作中,mysql应该部署到 一台独立的服务器上,不与tomcat共用服务器,由于成本原因,现部署到一起 为避免出错引起麻烦,先备份: 一:环境清理:先卸载系统自带的mysql 停止mysql: ...

  3. python简单笔记

    Remarks:python中注意缩进(Tab键或者4个空格) print(输出) 格式:print(values) 字符串.数字.变量等都可以输出: 实例: print(1)->1 print ...

  4. zookeeper单机集群搭建

    1. 下载zookeeper 参考官方文档下载一节:https://zookeeper.apache.org/doc/current/zookeeperStarted.html#sc_Download ...

  5. BZOJ2669 [cqoi2012]局部极小值 状压DP 容斥原理

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2669 题意概括 有一个n行m列的整数矩阵,其中1到nm之间的每个整数恰好出现一次.如果一个格子比所 ...

  6. BZOJ1898 [Zjoi2005]Swamp 沼泽鳄鱼 矩阵

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1898 题意概括 有一个无向图. 其中,有许多条鱼在以循环的规律出现,比如循环在1,2,3这些点出现 ...

  7. Quratz入门

    一:介绍 1.应用场景 基本上任何公司都会用到调度这个功能, 比如我们公司需要定期执行调度生成报表, 或者比如博客什么的定时更新之类的,都可以靠Quartz来完成.正如官网所说,小到独立应用大到大型电 ...

  8. 用js来实现那些数据结构01（数组篇01-数组的增删）

    在开始正式的内容之前,不得不说说js中的数据类型和数据结构,以及一些比较容易让人混淆的概念.那么为什么要从数组说起?数组在js中是最常见的内存数据结构,数组数据结构在js中拥有很多的方法,很多初学者记 ...

  9. python+imageMagick写的一个压缩图片脚本

    !/usr/bin/python import os import cPickle as p import re import Image def imageCompre(imagedir = '.' ...

  10. JavaScript函数使用技巧

    JavaScript中的函数是整个语言中最有趣的一部分,它们强大而且灵活.接下来,我们来讨论JavaScript中函数的一些常用技巧: 一.函数绑定 函数绑定是指创建一个函数,可以在特定的this环境 ...