「天地失色」如何讓HTML網頁變成灰色素調

---

title: 如何網頁變成灰色素調
date: 2020-04-04 23:31:42
tags: [Hexo,建站]

categories: [建站]

先來看幾個效果圖

1. layui社區

<!-- more -->

1. 騰訊首頁

1. CSDN

1. 百度首頁（忘記截圖）

實踐 - 照貓畫虎

1. 先找點HTML頁面最好有文字有圖片，或者本身隨意寫幾個，這裏從網上下載一個簡單頁面來演示。隨意下載一個模板網頁，先來預覽下未修改前的樣式：

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;
}

效果預覽：

1. 素調 - 方式二：CSDN方式，也在html標籤加入。

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

備用：

<style>
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- */
}
</style>

效果預覽：

1. 素調 - 方式三：騰訊。定義全局樣式，在body上引入樣式：

.garyBody {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}

效果預覽：

1. 其它方式。

好比grayscale.js或者http://www.majas-lapu-izstrad...，瀏覽器大safari、Chrome、Firefox、IE、edge的兼容性，請自行測試。

總結

素調方式大同小異，應該都是遵循微軟的濾鏡。至於你問我爲何可以在0點準時換裝，我猜測一個是過早獲知消息、定時做業、人工做業兩套圖片樣式、批量下架、並且有的也不是定時完成，好比遊戲，有的第二天00:12都還不能登陸，估計運維睡了，晚點手動操做下。

最後附一張天地失色 - 萬物回春：