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

news2024/11/24 9:53:01

突然想起写这篇文章是因为，公司的产品大早上打电话说：“赶紧，业务刚通知，我们的官网、小程序、公众号的首页需要变为灰色背景，最好在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