讓網站變灰的css代碼實例

時間：2025-10-27 07:18:23 澤森網頁設計

讓網站變灰的css代碼實例

　css的功能已經比較完善，簡簡單單的就要可以讓網站變成灰色，但是，你自己會做嗎？下面的是小編為大家搜集的讓網站變灰的css代碼實例，供大家參考。

　　讓網站變灰的css代碼實例1

　　方法1：支持IE

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

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

　　方法2：支持IE

　　body {filter:gray}

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

　　提示：雖然這個方法代碼量最小，但是效果卻不好，而且網頁也比較卡。

　　方法3：同時支持IE和Chrome

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

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

　　最簡單地把頁面的開始標簽中間之間加：

　　style="-webkit-filter: grayscale(100%);"

　　或者修改站點CSS樣式

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

　　將上述代碼添加加到CSS最頂端就可以實現。

　　為了兼容多種瀏覽器標準，可以增加一下樣式：

　　html {

　　-webkit-filter: grayscale(100%);

　　-moz-filter: grayscale(100%);

　　-ms-filter: grayscale(100%);

　　-o-filter: grayscale(100%);

　　filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

　　_filter:none;

　　如果網站后臺無法定義CSS樣式，這需要在站點模板頁的head標簽中間插入style標志位：

　　對于一些老的網站，為了支持該函數需要修改html標頭，將其修改為最新標準標頭才可以：對一些使用Flash（不在建議使用）的`老站點，起顏色可能也不支持CSS濾鏡變灰，則需要在可以在FLASH代碼的和之間插入：

　　Nginx代理

　　對于一下沒有辦法修改源站代碼的情況下，也可以在Nginx站點代理無服務器上，通過sub_filter指令來實現。

　　受限確保nginx支持http_sub_module模塊，如果不支持需要重新編譯安裝Nginx，自愛安裝時候添加build參數—with-http_sub_module

　　然后在Nginx的http模塊增加如下代碼：

　　sub_filter '' '';sub_filter_once on;

　　然后nginx -t測試配置正常無誤

　　nginx -s reload 重啟nginx即可

【讓網站變灰的css代碼實例】相關文章：