css如何快速将网站设置为灰色背景

突然想起写这篇文章是因为，公司的产品大早上打电话说：“赶紧，业务刚通知，我们的官网、小程序、公众号的首页需要变为灰色背景，最好在10点半之前上线”。当时心有千般不愿，但最后生活压倒我坚硬的脊梁。哈哈哈，闲话少说~

一、为啥要用整体变为灰色背景

在特殊的日子，比如清明、国家公祭日、大的自然灾害发生、国家的重要领导去世等等一些悲痛的日子，从国家报道到公司网站到个人，为表示我们对逝者的悼念，都会让网站的全部网页变成灰色（黑白色）。

例如：

二、实现方法

1、CSS方法

在页面html标签添加行内样式，或者在css文件中，或者在head标签中添加都可以。原理就是采用了ie的滤镜方法，和css提供的grayscale()方法，感兴趣的话大家可以去查查资料~哈哈


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


<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">
    <head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<title>title>				
	head>
	<body>
		<div id="app">div>
	body>
html>

大部分的浏览器都会支持css filter


img{
	-webkit-filter: grayscale(100%);            /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/
       -moz-filter: grayscale(100%);            /* 没有实现 */
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);            /* CSS3 filter方式，标准写法*/
            filter: url(filters.svg#grayscale); /* Firefox 4+ */
            filter: gray;                       /* IE 6-9 */
}
img:hover{
	-webkit-filter: grayscale(0%);
	   -moz-filter: grayscale(0%);
	    -ms-filter: grayscale(0%);
	     -o-filter: grayscale(0%);
	        filter: grayscale(0%);
	        filter: none; /* Firefox 4+, IE 6-9 */
}

2、js方法

加入大神的集成js插件--->grayscale.js插件

下载链接-->http://cn.baiwanzhan.com/js/gray_baiwanzhan.js

局限性的话就是对于高版本的Safari 4和Chrome可能不会适用（不支持CanvasContext.getImageData）具体没去验证


window.οnlοad = function(){
    grayscale(document.body);
}
 
//或
window.οnlοad = function(){
    grayscale(document.getElementsByTagName("img"));
}
 
//或
$(function(){
    grayscale($("#g"));
})

3、针对ie10\11大家可以参考作者whqet的文章，里边很详细的介绍了如何解决这个问题，文章的传送门我已经放在下边了，感兴趣的同学可以去看看~

跨浏览器图像灰度(grayscale)解决方案_whqet的博客-CSDN博客_gray scale jpeg 资源实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。https://blog.csdn.net/whqet/article/details/22737149

相关阅读:
42、集合的第一大类：List
Linux环境升级npm和node的版本
deforum + kandinsky = 视频工作流
永热爱敢向前 | Paraverse平行云的2023 年终总结
华科重要实验
CentOS下对安装不同ModSecurity版本的Nginx的并发性能测试
[附源码]计算机毕业设计JAVA创意众筹网站
Spark性能调优案例-千亿大表读取，数据倾斜和task倾斜
在CentOS 7.7 x86_64上为python 2.7.5安装pip的靠谱方法
9月7日作业

原文地址：https://blog.csdn.net/codingLeader/article/details/128132879