修改CSS樣式實現(xiàn)網(wǎng)頁灰色(沒有顏色只有淺色黑白)的幾個方法整理
我要評論一般在清明節(jié)，全國哀悼日，大地震的日子，以及一些影響力很大的偉人逝世或紀念日的時候，身為站長的我們都會讓自己的網(wǎng)站的全部網(wǎng)頁變成灰色（黑白色），以表示我們對逝者的悼念。那么今天就說說，通過幾行簡單的代碼，來實現(xiàn)這個功能。
今天上午有網(wǎng)友提到希望將網(wǎng)站整體的色調(diào)換成灰色、黑色色調(diào)，這個記得在以前紀念一些日子的時候會有用到，以前腳本之家網(wǎng)站中也有使用的。記得那時候直接是修改CSS就可以實現(xiàn)，既然有用戶需要，這里抽點時間再整理一下看看是否有其他更好的方法。
我們可以根據(jù)實際的需要選擇合適的CSS代碼樣式添加到自己的網(wǎng)頁模板的代碼中實現(xiàn)網(wǎng)頁灰色、黑白樣式。
第一、網(wǎng)頁黑白代碼樣式A第一種：修改CSS文件
我們可以在網(wǎng)頁的CSS文件中添加以下的CSS代碼，來實現(xiàn)網(wǎng)頁黑白色，也就是網(wǎng)站變灰
CSS代碼
網(wǎng)頁黑白代碼樣式A
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
也推薦這種代碼網(wǎng)頁黑白代碼樣式B
<style>
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;
}
</style>
這里我們可以將代碼添加到HEAD模板中，要實現(xiàn)全站才可以。
第二種：在網(wǎng)頁的<head>標簽內(nèi)加入以下代碼
如果你不想改動CSS文件，你可以通過在網(wǎng)頁頭部中的<head>標簽內(nèi)部加入內(nèi)聯(lián)CSS代碼的形式實現(xiàn)網(wǎng)站網(wǎng)頁變灰
代碼
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>
第三種：修改<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- */
}
這里，我們根據(jù)實際的需要選擇添加到代碼中。
PS：以上幾種方法，都是通過CSS的濾鏡來控制頁面的顯示而已，唯一不同的就CSS代碼調(diào)用的方式。各位，喜歡哪種就自己挖去吧！
相關文章
css 圖片變黑白效果 使用CSS將圖片轉(zhuǎn)換成黑白的
時代發(fā)展，如今，CSS3的逐步推進，我們也開始看到“黑白效果”大規(guī)模應用于實際的可能,接下來介紹CSS3 greyscale 濾鏡實現(xiàn)，感興趣的朋友可以了解下2013-01-08- 5．12地震給四川帶來了巨大災難，5月19日到5月21日為全國哀悼日，有很多網(wǎng)站界面今天都變成了黑白色，從而紀念那些在地震中死去的逝者2008-10-17
在頁面上，有時會需要展示一些透明背景的圖片，為了展示其透明的背景，通常會像PS一樣，使用黑白相間的格子組成背景，從而告訴用戶，這是一張透明的圖片，本文給大家介紹使2022-05-30
