网页变灰的方法，适用于IE

最新推荐文章于 2022-12-10 16:47:08 发布

ma_pei

最新推荐文章于 2022-12-10 16:47:08 发布

阅读量3.2k

点赞数 4

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ma_pei/article/details/105359740

版权

本文介绍了在哀悼日期间使网页变灰的方法，特别针对IE浏览器提供了兼容性解决方案，包括修改meta标签为'IE=EmulateIE9'，添加特定CSS样式，以及引入使网页变灰的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在哀悼日的时候如何让网页变灰？

1、适用于谷歌、火狐、360极速模式的代码

 html{
    filter: grayscale(100%); 
 -webkit-filter: grayscale(100%); 
 -moz-filter: grayscale(100%); 
 -ms-filter: grayscale(100%); 
 -o-filter: grayscale(100%); 
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
 -webkit-filter: grayscale(1); 
 zoom: 1; }

但是上面的代码不兼容IE低版本的浏览器
2、适用于IE版本的使网页变灰的代码
1）、检查网页代码中的meta标签中是否写了以下代码
在这里插入图片描述
content=“IE=EmulateIE9”
content中的IE版本EmulateIE7、EmulateIE8、EmulateIE9都可以，之前的代码是content=“IE=edge”，用IE浏览器访问网站的时候也不变灰，当时都有点抓狂了😩
2）、css样式中添加样式、或者在网页中直接添加

*{
   
  filter: gray(enabled=1) !important;
}
或者（我为了保险起见，两段代码都添加了）

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
   
 filter: gray(enabled=1) !important;
}

3）、很重要的一步：添加使网页变灰的js代码

<script>
			/*
		   * -- grayscale.js --
		   * Copyright (C) James Padolsey (http://james.padolsey.com)
		   *
		   */
			var grayscale = (function () {
   
				var config = {
   
					colorProps: ['color', 'backgroundColor', 'borderBottomColor', 'borderTopColor', 'borderLeftColor',
						'borderRightColor', 'backgroundImage'],
					externalImageHandler: {
   
						/* Grayscaling externally hosted images does not work
								- Use these functions to handle those images as you so desire */
						/* Out of convenience these functions are also used for browsers
								like Chrome that do not support CanvasContext.getImageData */
						init: function (el, src) {
   
							if (el.nodeName.toLowerCase() === 'img') {
   
								// Is IMG element...
							} else {
   
								// Is background-image element:
								// Default - remove background images
								data(el).backgroundImageSRC = src;
								el.style.backgroundImage = '';
							}
						},
						reset: function (el) {
   
							if (el.nodeName.toLowerCase() === 'img') {
   
								// Is IMG element...
							} else {
   
								// Is background-image element:
								el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';
							}
						}
					}
				},
					log = function () {
   
						try {
   
							window.console.log.apply(console, arguments);
						} catch (e) {
    };
					},
					isExternal = function (url) {
   
						// Checks whether URL is external: 'CanvasContext.getImageData'
						// only works if the image is on the current domain.
						return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);
					},
					data = (function () {
   
						var cache = [0],
							expando = 'data' + (+new Date());
						return function (elem) {
   
							var cacheIndex = elem[expando],
								nextCacheIndex = cache.length;
							if (!cacheIndex) {
   
								cacheIndex = elem[expando] = nextCacheIndex;
								cache[cacheIndex] = {
   };
							}

最低0.47元/天解锁文章