- 相關(guān)推薦
讓網(wǎng)站變灰的css代碼實(shí)例
css的功能已經(jīng)比較完善，簡(jiǎn)簡(jiǎn)單單的就要可以讓網(wǎng)站變成灰色，但是，你自己會(huì)做嗎？下面的是小編為大家搜集的讓網(wǎng)站變灰的css代碼實(shí)例，供大家參考。
讓網(wǎng)站變灰的css代碼實(shí)例1
方法1：支持IE
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
說(shuō)明：此方法支持IE，不支持Firefox和Chrome等非IE內(nèi)核瀏覽器。
方法2：支持IE
body {filter:gray}
說(shuō)明：此方法支持IE，不支持Firefox和Chrome等非IE內(nèi)核瀏覽器。
提示：雖然這個(gè)方法代碼量最小，但是效果卻不好，而且網(wǎng)頁(yè)也比較卡。
方法3：同時(shí)支持IE和Chrome
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
說(shuō)明：此方法支持IE瀏覽器、Safari和Chrome等瀏覽器，但是不支持Firefox瀏覽器。
讓網(wǎng)站變灰的css代碼實(shí)例2
最簡(jiǎn)單地把頁(yè)面的開(kāi)始標(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)站后臺(tái)無(wú)法定義CSS樣式，這需要在站點(diǎn)模板頁(yè)的head標(biāo)簽中間插入style標(biāo)志位：
對(duì)于一些老的.網(wǎng)站，為了支持該函數(shù)需要修改html標(biāo)頭，將其修改為最新標(biāo)準(zhǔn)標(biāo)頭才可以：對(duì)一些使用Flash（不在建議使用）的老站點(diǎn)，起顏色可能也不支持CSS濾鏡變灰，則需要在可以在FLASH代碼的和之間插入：
Nginx代理
對(duì)于一下沒(méi)有辦法修改源站代碼的情況下，也可以在Nginx站點(diǎn)代理無(wú)服務(wù)器上，通過(guò)sub_filter指令來(lái)實(shí)現(xiàn)。
受限確保nginx支持http_sub_module模塊，如果不支持需要重新編譯安裝Nginx，自愛(ài)安裝時(shí)候添加build參數(shù)—with-http_sub_module
然后在Nginx的http模塊增加如下代碼：
sub_filter '' '';sub_filter_once on;
然后nginx -t測(cè)試配置正常無(wú)誤
nginx -s reload 重啟nginx即可
【讓網(wǎng)站變灰的css代碼實(shí)例】相關(guān)文章：
PHP實(shí)用的代碼實(shí)例08-12
css設(shè)置層透明實(shí)例07-16
學(xué)習(xí)php分頁(yè)代碼實(shí)例05-20
CSS的animation屬性使用實(shí)例分析04-08
實(shí)用的PHP實(shí)例代碼20個(gè)06-11
實(shí)用的PHP語(yǔ)言實(shí)例代碼06-13
C語(yǔ)言快速排序?qū)嵗a02-26