整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
色显示百度首页
今天早上醒来一看各大网站，为表示新冠肺炎疫情死难者的哀悼，各大网站均将页面变为灰色显示，显示的极为庄重肃穆。本文主要介绍常用网页页面快速变灰色的方法。
对于网页而言，页面色彩、布局等主要受到层叠样式文件CSS控制，网站页面整体色彩的改变可以通过CSS进行整体的控制。在CSS中可以通过filter滤镜属性实现对网页元素进行图像、背景及素材的渲染。
Filter调整测试Demo
如上图所示，通过设置Filter的属性取值，实现对颜色色彩的控制。主要属性说明如下：
1、filter: blur()方法
该方法主要用于实现对图像设置高斯模块，及屏幕上的像素融合程度即模糊程度。其参数需要以像素值形式进行提供。参数值越大模糊程度越高。示例如下图：
网页中显示的图标
在未使用filter属性未设置时，显示的原始图片效果如上图所示。我们可以进一步对页面添加style样式调整filter blur参数值，可实现页面的模糊程度。如blur参数取值为2个像素，效果如下：
blur参数取值为2显示效果
2、filter: grayscale()方法
该方法是用于实现页面变灰的主要方法，主要用于设置页面显示的灰度。参数值需要以百分比形式进行提供，0%表示未进行灰度调整，100%表示将页面完全转化为灰度。我们还是以图标为例，对其进行灰度设置进行说明。当灰度取值设置为20%时效果如下图1所示，当灰度值设置为100%时效果如图2所示：
图一：灰度20%设置显示效果
图二：灰度100%设置图片显示效果
使用filter提供的 grayscale()方法对页面进行灰度设置实现效果描述如上图，我们可以快速实现将页面快速变灰。目前浏览器的内核型号较多，对CSS的支持与解析情况不相同，在进行页面灰度处理时需要考虑到用户终端浏览器的类型，需要进行CSS样式的兼容性设置。实现基本代码描述如下：
-webkit-filter: grayscale(100%);
//(Apple Safari内核)
-moz-filter: grayscale(100%);
//(Firefox浏览器)
-ms-filter: grayscale(100%);
//(Internet Explorer（IE）浏览器)
-o-filter: grayscale(100%);
//(Opera浏览器)在明确网页变灰所需使用滤镜效果之后，我们可以使用其属性进行页面变灰效果。以下给出本人编写的一个简单Demo进行变灰测试，原始页面效果如下：
测试原始页面
按照编码要求，我们在该页面头部<head>编写样式文件，实现变灰处理，所添加代码描述如下：
变灰实现代码
在页面添加变灰代码之后，我们可以看出明显的变灰效果，效果描述如下：
页面变灰实现效果
本文给出了网页页面变灰的实现简单方法，作为网页设计人员、前端开发人员应当能够掌握基本使用方法，实现页面的快速改变。
悼日打开各个网站，发现网页都变成灰色了。今年国家经历了非常惨痛的时刻，有很多烈士英雄保卫人民的安危遇难，昨天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。为了深切哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞，4月4日0点起，全国多家网站和移动端，比如百度、优酷、爱奇艺、哔哩哔哩、抖音、快手、斗鱼和CSDN等平台给出公告称：2020年4月4日全国性哀悼活动期间，停止今天一切公共娱乐活动。
随便打开这些任何一个网站，全站的内容都变成了灰色，包括按钮、图片等等。相信这时候从事程序开发的粉丝可能会好奇这是怎么做到的呢？
其实解决方案很简单，只需要几行代码就能搞定了。从事前端开发的朋友会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。如下图，有一个灰色样式：[filter: grayscale(100%);]，也许就是这一个样式控制着整个网页显示效果。
现在试着关掉这个样式，会发现整个csdn页面恢复了往常的红色主题，包括网站logo、图片和按钮都恢复了。
总结上面的实验效果，果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。只要修改这部分CSS代码：
了纪念一些影响力很大的伟人逝世或者重要的纪念日的时候需要让网页全部变灰来表示我们对逝者的悼念。
其实这个功能很简单，只需要在HTML 的head标签里加入如下代码即可。
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
这里实现的是让网页整体变灰，无论网站的头部、尾部或者侧边栏分离都可以实现效果。网上有很多方法，多数都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码调用的方式而已。
很早以前想着一个网站那么多的图片、手动处理后替换是一个工作量异常繁复的事，然而事情当然没有这么简单，仅需几行代码即可轻松完成。
最后附上已故伟人的一首词，沉痛哀悼深切缅怀...
《满江红·江上青百年诞辰祭》
自古英雄，凭苍宇、江山点索。
酬壮志、铁窗寒彻，泮池磅礴。
史岭红梅花沥血，芦沟晓月天飞鹤。
擎玉虹，魑魅冷相看，惊魂魄。
歌颍上，旗旆烁。驱稔寇，飙尘恶。
诉声声杜宇，孛星凋落。
春水绿杨风曼暖，秋山红叶日彰灼。
清明日、持酒告先灵，神州跃。
*请认真填写需求信息，我们会在24小时内与您取得联系。
