讓網站變灰的CSS代碼（支持IE、FIREFOX和CHROME）（轉）

時間 2019-11-16

標籤網站變灰 css 代碼支持 firefox chrome 欄目網站開發简体版

原文原文鏈接

方法1：支持IEjavascript

<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>html

<html xmlns=」http://www.w3.org/1999/xhtml」>java

<style>web

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}瀏覽器

</style>插件

說明：此方法支持IE，不支持Firefox和Chrome等非IE內核瀏覽器。orm

方法2：支持IExml

body {filter:gray}htm

說明：此方法支持IE，不支持Firefox和Chrome等非IE內核瀏覽器。
提示：雖然這個方法代碼量最小，可是效果卻很差，並且網頁也比較卡。ip

方法3：同時支持IE和Chrome

<style>

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

</style>

說明：此方法支持IE瀏覽器、Safari和Chrome等瀏覽器，可是不支持Firefox瀏覽器。

方法4：使用grayscale.js插件

使用grayscale.js插件。這個插件是模擬IE的filter:progid方，官網地址在：

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

使用方法：

window.onload=function(){

grayscale(document.body);

}

</script>

說明：支持IE、Safari、Chrome、Opera和Firefox等瀏覽器。
問題：這個在IE下也挺佔資源的。

建議：使用方法3，雖然不支持更多的瀏覽器，可是穩定、速度快，並且資源佔用小。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。