網(wǎng)站快速變黑白灰色的4種方法

作者：IDCBEST來源：天下數(shù)據(jù)2020/4/4 瀏覽次數(shù)：4326

TikTok方案高防CDN套餐香港服務(wù)器租用美國服務(wù)器租用海外服務(wù)器租用 SSL證書云主機云代理

一般在清明節(jié)，全國哀悼日，大地震的日子，以及一些影響力很大的偉人逝世或紀念日的時候，身為站長的我們都會讓自己的網(wǎng)站的全部網(wǎng)頁變成灰色（黑白色），以表示我們對逝者的悼念。那么天下數(shù)據(jù)小編就說說，通過幾行簡單的代碼，來實現(xiàn)這個功能。

第一種：修改CSS文件

我們可以在網(wǎng)頁的CSS文件中添加以下的CSS代碼，來實現(xiàn)網(wǎng)頁黑白色，也就是網(wǎng)站變灰

CSS代碼

html {

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

-webkit-filter: grayscale(100%);}

第二種：在網(wǎng)頁的<head>標簽內(nèi)加入以下代碼

如果你不想改動CSS文件，你可以通過在網(wǎng)頁頭部中的<head>標簽內(nèi)部加入內(nèi)聯(lián)CSS代碼的形式實現(xiàn)網(wǎng)站網(wǎng)頁變灰

代碼

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

html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}

有一些站長的網(wǎng)站可能使用這個css 不能生效，是因為網(wǎng)站沒有使用最新的網(wǎng)頁標準協(xié)議

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

　　請將網(wǎng)頁最頭部的<html>替換為以上代碼。

第三種：修改<html>標簽加入內(nèi)聯(lián)樣式

如里上面的兩種方式都不喜歡，可以通過修改<html>標簽，以加入內(nèi)聯(lián)樣式的方法，達到網(wǎng)頁變灰的效果

代碼

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);">

第四種：本人用的CSS代碼

代碼：

body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */}

PS：以上幾種方法，都是通過CSS的濾鏡來控制頁面的顯示而已，唯一不同的就CSS代碼調(diào)用的方式。各位，喜歡哪種就自己挖去吧！

本文鏈接：http://m.51huadong.com/cloundnews/11004574.html