哀悼日网站全站变灰代码,最简单的还是ng这种方式...
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。
那么今天就说说,通过几行简单的代码,来实现这个功能。
第一种:修改CSS文件
我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰。
代码
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);
}
第二种:在网页的<head>标签内加入以下代码
如果你不想改动CSS文件,你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰。
代码
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
第三种:修改<html>标签加入内联样式
如里上面的两种方式都不喜欢,可以通过修改<html>标签,以加入内联样式的方法,达到网页变灰的效果
代码
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">
第四种:作者本人用的CSS代码
代码:
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}
第五中:通过nginx使网站变灰
在Nginx负载均衡服务器上,利用sub_filter指令在输出的HTML中增加一行。
就可以实现在IE及IE内核浏览器下,所有网站变灰色。步骤如下:
1、重新编译Nginx,增加http_sub_module模块:
--with-http_sub_module
2、在nginx.conf配置文件的http {...}大括号内增加以下两行:
sub_filter '</head>' '<style type="text/css">html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>';
sub_filter_once on;
3、保存后,重新加载配置文件:
/usr/local/nginx/sbin/nginx -t
/usr/local/nginx/sbin/nginx -s reload
这样,整个页面就都变灰色了。
PS:以上几种方法,都是通过CSS的滤镜来控制页面的显示而已,唯一不同的就CSS代码调用的方式。各位,喜欢哪种就自己挖去吧!
作者:小闪
来源:https://www.coodd.cn/62.html
猜你喜欢
1、GitHub 标星 3.2w!史上最全技术人员面试手册!FackBoo发起和总结
2、如何才能成为优秀的架构师?
3、从零开始搭建创业公司后台技术栈
4、程序员一般可以从什么平台接私活?
5、37岁程序员被裁,120天没找到工作,无奈去小公司,结果懵了...
6、滴滴业务中台构建实践,首次曝光
7、不认命,从10年流水线工人,到谷歌上班的程序媛,一位湖南妹子的励志故事
8、15张图看懂瞎忙和高效的区别
哀悼日网站全站变灰代码,最简单的还是ng这种方式...相关推荐
- 哀悼日网站全站变灰代码
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念. 那么今天就说说,通过几行简单的 ...
- 普歌-码上鸿鹄团队:vue/Nuxt实现当年或每年哀悼日网站全站变灰
html/css/vue根据时间全站自动变灰 1. 当年时间-全站变灰 2. 如果要设置每年固定日期变灰(我这里只设置了国家公祭日(南京)和汶川地震) 2.1这里演示在vue项目中如何使用 vue-c ...
- PHP网站屏幕变灰,网站全局变灰代码
[CSS方法] 在网站需要变灰的页面head部分加入一行style 以上代码适用于主流浏览器,如新版的chrom,edge等. html { -webkit-filter: grayscale(100 ...
- 网站全站变灰:愿逝者安息,愿生者奋发,愿祖国昌盛,致敬英雄
文章目录[隐藏] 前言 网站变灰说明 网站变灰教程 总结 前言 今天是 2020 年的清明节,今日全国哀悼,一起缅怀抗击新冠疫情牺牲烈士和逝世同胞. 网站变灰说明 为响应国家对抗击新冠疫情牺牲烈士和逝 ...
- 网站整体变灰代码 filter
grayscale(amount) : 对图片进行灰度转换. amount转换值的大小,可以是数字或百分比. 当值为 100% 时,灰度最大. 0% 时与原图没有区别. 0% 到 100% 之间的值会 ...
- 让整个网站网页变灰的方法
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么今天就说说,通过几行简单的代 ...
- 【2020.04.04缅怀英烈,哀悼英雄】哀悼日网站变灰代码
哀悼日网站变灰代码.昨晚加班把公司的多有网站全变设置完成,缅怀英烈,哀悼英雄.记住你们,因为你们我们变得安全,谢谢你们. 在全站的CSS中写入以下代码: html { filter:progid:DX ...
- 网站变灰代码,一行代码让网站整体变灰,wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
- java web 颜色灰色_网站动态变灰解决方案(java web项目网站)
每逢5.12和哀悼日,各大门户网站都会把自己网站变灰色,以此来表示对逝者的哀悼. 下面是一个java web项目网站变化的设计方案. 思路是这样的,首先由个页面来操作网站是变灰还是不变灰, 然后把选择 ...
- 清明节全国哀悼,那么网站全部变灰是怎么实现的?
作为一名后端java开发人员,初次看到这次2020年清明节网站全部变灰的第一印象是他们应该是改了贴图或者说改了一些配置,怎么思考都应该是在backgroud这些参数上做修改,但是当我今天打开百度地图的 ...
最新文章
- php自动装载编程,php 类自动载入的方法
- c语言装饰,C++设计模式之装饰模式(Decorator)
- switch里能不能用continue?
- 01_pandas安装、Series、DataFrame、head、tail、 index、columns、to_numpy、describe、置换数据、sort_index、sort_values
- 南京Uber优步司机奖励政策(12月28日到1月3日)
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):目录
- Pytorch class 中 的__call__方法
- [Ext JS 4] MVC 应用程序框架
- ubuntu安装使用latex和texmaker--PC端
- Android中在布局中写ViewPager无法渲染出来的问题
- 四、StackPanel控件
- 权重分析——CRITIC权重法
- 西门子200PLC指令详解——位逻辑指令
- Appscan漏洞之Authentication Bypass Using HTTP Verb Tampering
- 期刊论文发表有哪些方法
- 计算机辅助绘图工具,CAD精确辅助绘图工具
- oracle11g64位怎么用sql,PLSQL Developer连接不上Oracle11g64位的解决办法
- Spring Boot 定制横幅banner与关闭banner
- MySQL5.7安装教程(workbench安装教程会在之后出)(32位和64位均可)
- 英语chalchite蓝绿松石CHALCHITE单词
热门文章
- Sklearn流水线交叉验证以及超参数网格交叉评估基础案例实战-大数据ML样本集案例实战...
- 每个Java开发者应该知道(并爱上)的8个工具
- nyoj 破门锁(水题)
- Tip:部署sharepoint2013SP1指定SQL数据库时的小细节
- 通过cacti+nagios监控服务器的运行—nagios nrpe
- 单/多文档的窗体类属性修改(VC_MFC)
- Illustrator 教程,如何在 Illustrator 中更改角色的姿势?
- Office for Mac升级提醒如何去掉?关闭Mac的Microsoft AutoUpdate弹框提示
- 苹果Mac专业级照片编辑器:RAW Power
- Ps 初学者教程,如何添加选择、减去选择和进行交叉选择?