博客
关于我
简单实现网站灰色效果以谨记2020年4月4日悼念日
阅读量:534 次
发布时间:2019-03-08

本文共 676 字,大约阅读时间需要 2 分钟。

一 2020年4月4日悼念日——星期六——清明节

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外领事馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。于此同时,很多网站全部变成了灰色,以响应党的号召,进行特殊形式的默哀。出于对技术的好奇,就简单的实现了一下该功能。

二 个人仿站原网页显示

三 个人仿站原网页仅图片灰色显示

由图所示只有图片变成灰色,实际上之只要在相应的CSS样式文件中加下列代码即可:

/*支持的浏览器 Chrome, Safari, Opera*/img{    /*90%也可以写成小数形式0.9*/    -webkit-filter: grayscale(90%);    filter: grayscale(90%); }

三 个人仿站整网页灰色显示

由图所示全网页都变成灰色,实际上之只要在相应的CSS样式文件中加下列代码即可:

/*支持的浏览器 Chrome, Safari, Opera*/*{    /*90%也可以写成小数形式0.9*/    -webkit-filter: grayscale(90%);    filter: grayscale(90%);}或者body{    /*90%也可以写成小数形式0.9*/    -webkit-filter: grayscale(90%);    filter: grayscale(90%);}

参考资料:

 

 

 

 

 

转载地址:http://wrsiz.baihongyu.com/

你可能感兴趣的文章
no1
查看>>
NO32 网络层次及OSI7层模型--TCP三次握手四次断开--子网划分
查看>>
NOAA(美国海洋和大气管理局)气象数据获取与POI点数据获取
查看>>
NoClassDefFoundError: org/springframework/boot/context/properties/ConfigurationBeanFactoryMetadata
查看>>
node exporter完整版
查看>>
Node JS: < 一> 初识Node JS
查看>>
Node JS: < 二> Node JS例子解析
查看>>
Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime(72)
查看>>
Node 裁切图片的方法
查看>>
Node+Express连接mysql实现增删改查
查看>>
node, nvm, npm,pnpm,以前简单的前端环境为什么越来越复杂
查看>>
Node-RED中Button按钮组件和TextInput文字输入组件的使用
查看>>
Node-RED中Switch开关和Dropdown选择组件的使用
查看>>
Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本
查看>>
Node-RED中使用JSON数据建立web网站
查看>>
Node-RED中使用json节点解析JSON数据
查看>>
Node-RED中使用node-random节点来实现随机数在折线图中显示
查看>>
Node-RED中使用node-red-browser-utils节点实现选择Windows操作系统中的文件并实现图片预览
查看>>
Node-RED中使用node-red-contrib-image-output节点实现图片预览
查看>>
Node-RED中使用node-red-node-ui-iframe节点实现内嵌iframe访问其他网站的效果
查看>>