哀悼日网站全站变灰代码,最简单的还是ng这种方式...

简介: 一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。

云栖号资讯:【点击查看更多行业资讯
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!

一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。

那么今天就说说,通过几行简单的代码,来实现这个功能。

第一种:修改CSS文件

我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰。

代码

html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}

第二种:在网页的标签内加入以下代码

如果你不想改动CSS文件,你可以通过在网页头部中的

标签内部加入内联CSS代码的形式实现网站网页变灰。

代码

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

第三种:修改标签加入内联样式

如里上面的两种方式都不喜欢,可以通过修改标签,以加入内联样式的方法,达到网页变灰的效果

代码

<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://yqh.aliyun.com/zhibo

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-04-07
本文作者:互联网架构师
本文来自:“互联网架构师 微信公众号”,了解相关信息可以关注“互联网架构师

相关文章
|
小程序 Java 物联网
基于java的坦克大战游戏的设计与实现--开题报告--【毕业论文】
基于java的坦克大战游戏的设计与实现--开题报告--【毕业论文】
关闭手机卡的流量的方法有哪些?
关闭手机卡的流量的方法主要有以下几种:
|
10月前
|
Ubuntu 编译器
dpdk01-安装
dpdk01-安装
|
存储 Linux C语言
通过这14点,让你快速入门C语言(2)
通过这14点,让你快速入门C语言(2)
146 0
|
机器学习/深度学习 人工智能 自然语言处理
面向自然语言处理的迁移学习(一)(1)
面向自然语言处理的迁移学习(一)
236 0
|
Java 数据库 开发工具
java Swing学生成绩管理系统【项目源码+数据库脚本】
java Swing学生成绩管理系统【项目源码+数据库脚本】
325 0
|
设计模式 测试技术 Python
Python实现坦克大战(TankWar)游戏(下)
Python实现坦克大战(TankWar)游戏
317 0
|
存储 监控 安全
基于SaaS的教务系统平台设计构想
本篇是一篇自然科学论文,仅供参考。 大学挑战杯复赛没过,放博客纪念。
441 0
基于SaaS的教务系统平台设计构想
|
关系型数据库 MySQL 测试技术
|
机器学习/深度学习 算法 数据可视化
Vision Transformer 必读系列之图像分类综述(三): MLP、ConvMixer 和架构分析(上)
在 Vision Transformer 大行其道碾压万物的同时,也有人在尝试非注意力的 Transformer 架构(如果没有注意力模块,那还能称为 Transformer 吗)。这是一个好的现象,总有人要去开拓新方向。相比 Attention-based 结构,MLP-based 顾名思义就是不需要注意力了,将 Transformer 内部的注意力计算模块简单替换为 MLP 全连接结构,也可以达到同样性能。典型代表是 MLP-Mixer 和后续的 ResMLP。
1074 0
Vision Transformer 必读系列之图像分类综述(三): MLP、ConvMixer 和架构分析(上)

热门文章

最新文章