讓網(wǎng)站變灰的css代碼實(shí)例

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

　　讓網(wǎng)站變灰的css代碼實(shí)例1

　　方法1：支持IE

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

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

　　方法2：支持IE

　　body {filter:gray}

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

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

　　方法3：同時(shí)支持IE和Chrome

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

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

　　讓網(wǎng)站變灰的css代碼實(shí)例2

　　最簡單地把頁面的開始標(biāo)簽中間之間加：

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

　　或者修改站點(diǎn)CSS樣式

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

　　將上述代碼添加加到CSS最頂端就可以實(shí)現(xiàn)。

　　為了兼容多種瀏覽器標(biāo)準(zhǔn)，可以增加一下樣式：

　　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;

　　如果網(wǎng)站后臺無法定義CSS樣式，這需要在站點(diǎn)模板頁的head標(biāo)簽中間插入style標(biāo)志位：

　　對于一些老的.網(wǎng)站，為了支持該函數(shù)需要修改html標(biāo)頭，將其修改為最新標(biāo)準(zhǔn)標(biāo)頭才可以：對一些使用Flash（不在建議使用）的老站點(diǎn)，起顏色可能也不支持CSS濾鏡變灰，則需要在可以在FLASH代碼的和之間插入：

　　Nginx代理

　　對于一下沒有辦法修改源站代碼的情況下，也可以在Nginx站點(diǎn)代理無服務(wù)器上，通過sub_filter指令來實(shí)現(xiàn)。

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

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

　　sub_filter '' '';sub_filter_once on;

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

　　nginx -s reload 重啟nginx即可

【讓網(wǎng)站變灰的css代碼實(shí)例】相關(guān)文章：

CSS和JavaScript腳本實(shí)例03-29

css實(shí)現(xiàn)的tab切換效果實(shí)例03-29

C語言快速排序?qū)嵗�代碼06-04

java中通用的線程池實(shí)例代碼08-27

php中使用redis隊(duì)列操作實(shí)例代碼03-02

C語言插入排序算法及實(shí)例代碼12-05

CSS如何實(shí)現(xiàn)中英文雙語菜單效果代碼12-04

純css實(shí)現(xiàn)藍(lán)色圓角效果水平導(dǎo)航菜單代碼12-04

C語言選擇排序算法及實(shí)例代碼11-25