（转载）让网站变灰的CSS代码（支持IE、FIREFOX和CHROME）

2019独角兽企业重金招聘Python工程师标准>>>

<p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">原文：<a href="http://www.uisdc.com/gray-css-code">http://www.uisdc.com/gray-css-code</a></p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;"><strong>方法1：支持IE</strong></p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;style&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;/style&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;"><strong>方法2：支持IE</strong></p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">body {filter:gray}</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。<br />提示：虽然这个方法代码量最小，但是效果却不好，而且网页也比较卡。</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;"><strong>方法3：同时支持IE和Chrome</strong></p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;style&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;/style&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">说明：此方法支持IE浏览器、Safari和Chrome等浏览器，但是不支持Firefox浏览器。</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;"><strong>方法4：使用grayscale.js插件</strong></p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">使用grayscale.js插件。这个插件是模拟IE的filter:progid方，官网地址在：</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">使用方法：</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;script src=”http://james.padolsey.com/demos/grayscale/grayscale.js” type=”text/javascript”&gt;&lt;/script&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;script type=”text/javascript”&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">window.οnlοad=function(){</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">grayscale(document.body);</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">}</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">&lt;/script&gt;</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;">说明：支持IE、Safari、Chrome、Opera和Firefox等浏览器。<br />问题：这个在IE下也挺占资源的。</p> <p style="margin: 20px 0px; font-size: 1.2em; line-height: 1.8; font-family: Tahoma, Verdana, 宋体; color: #525252;"><strong>建议：使用方法3</strong>，虽然不支持更多的浏览器，但是稳定、速度快，而且资源占用小。</p>

转载于:https://my.oschina.net/loveking/blog/150116