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

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

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

其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. 对字符串进行频繁拼接的话，使用StringBuffer或者StringBuilder

    package zhengze; /*如果需要对字符串进行频繁拼接的话,使用StringBuffer或者StringBuilder StringBuffer:[字符串缓冲器]是线程安全的,效率低 St ...

  2. 依赖倒置原则(Dependence Inversion Principle,DIP)

    依赖倒转原则就是 A.要依赖于抽象,不要依赖于实现.(Abstractions should not depend upon details. Details should depend upon a ...

  3. 新建asp.net core项目

    开发环境:Windows Server R2 2008 开发工具:Microsoft Visual Studio 2017 新建asp.net core项目 创建web项目时,务必选择“ASP.NET ...

  4. C#: 执行批处理文件(*.bat)的方法

    static void Main(string[] args) { Process proc = null; try { proc = new Process(); proc.StartInfo.Fi ...

  5. BZOJ1296 [SCOI2009]粉刷匠 动态规划 分组背包

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1296 题意概括 有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝 ...

  6. P1865 A % B Problem 素数筛

    题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...

  7. python json数据处理

    1. python 转 json import json data={ "name":"haha", "age" : 1,"lis ...

  8. bfs-poj3278

    题目链接:http://poj.org/problem?id=3278 题意:农夫原始在N位置上,他的目的是要抓到在K位置上的牛.牛的位置是固定不变的,而农夫的移动是在一条水平线上进行的,移动方式有以 ...

  9. Linux学习之ACL权限详解(十)

    Linux系统ACL权限详解 目录 ACL权限简介与开启 查看与设定ACL权限 最大有效权限与删除ACL权限 默认ACL权限和递归ACL权限 ACL权限简介与开启权限 ACL权限简介 用户权限管理始终 ...

  10. ESLint + lint-staged 禁用老项目中的es6

    前言 ESLint作为插件化的javascript代码检测工具,为我们的平时的开发保驾护航,好处就不多说了详情查看官网. 问题 有这么一个五年前开发的老项目,机缘巧合到了我们这边来维护. 项目是zep ...