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

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

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

其CSS代码如下：

  1. body{
  2.   -webkit-filter:grayscale(100%);
  3.   -moz-filter:grayscale(100%);
  4.   -ms-filter:grayscale(100%);
  5.   -o-filter:grayscale(100%);
  6.   filter:grayscale(100%);
  7.   filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  8.   filter:gray;
  9.   -webkit-transform: translateZ(0);
  10. }

来源：网站变灰 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. web----框架基础

    Web框架本质: 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 真实开发中的python web程序来说,一般会分为两部分:服务器 ...

  2. SPLAY，LCT学习笔记（六）

    这应该暂时是个终结篇了... 最后在这里讨论LCT的一个常用操作:维护虚子树信息 这也是一个常用操作 下面我们看一下如何来维护 以下内容转自https://blog.csdn.net/neither_ ...

  3. python小工具myqr生成动态二维码

    python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装 命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...

  4. go语言学习-函数

    函数声明 函数声明包括函数名,形参列表,返回值列表(可选),函数体组成 func test(parameters) (returns) { // ... } 其中 parameters 就是函数的形参 ...

  5. C++中的智能指针

    一.动态内存管理 通常我们创建动态内存的时候,需要自己管理好内存,也就是说,new出来的对象一定要注意释放掉.下面通过例子可以看到这个问题所在: struct BBE{ int X; int Y; v ...

  6. json Map JsonObject JsonArray

    json字符串是不应包含 "\"转义字符的,json不能通过js json工具转换或者java json工具 包转换那么一定程度上json字符串已被在一次处理不在能转成json了. ...

  7. ab测试swoole和ngixn＋php-fpm对比

    做个swoole http_server和ngixn+php7-fpm测试 nginx swoole卓越的性能让我惊呆了   如需应用可nginx反代, swoole作为http_server, 不用 ...

  8. cvc-complex-type.2.4.a: Invalid content was found starting with element 'property'. One of '{"http:// www.springframework.org/schema/beans":import, "http:// www.springframework.org/schema/beans":a

    因为property并未被<bean class="">标签包围, 所以要用bean标签包围即可

  9. iOS Application Extension

    链接: iOS App Extension入门 iOS10通知及通知拓展Extension使用详解(附Demo) iOS10 通知extension之 Content Extension

  10. Android笔记（五）：广播接收者（Broadcast Receiver）

    Android有四大组件,分别为:Activity(活动).Service(服务).Content Provider(内容提供器).Broadcast Receiver(广播接收者). 引入广播的目的 ...