如何讓HTML網頁編程素調

---

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

---

先來看幾個效果圖

1. layui社區

2. 騰訊首頁

3. CSDN

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

實踐 - 照貓畫虎

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

2. 素調 - 方式一：在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;
}

效果預覽：

3. 素調 - 方式二：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>

效果預覽：

3. 素調 - 方式三：騰訊。定義全局樣式，在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);
}

效果預覽：

4. 其它方式。

比如grayscale.js或者http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11-v2/，瀏覽器大safari、Chrome、Firefox、IE、edge的兼容性，請自行測試。

總結

素調方式大同小異，應該都是遵循微軟的濾鏡。至於你問我爲什麼能夠在0點準時換裝，我猜想一個是過早獲知消息、定時作業、人工作業兩套圖片樣式、批量下架、而且有的也不是定時完成，比如遊戲，有的次日00:12都還不能登錄，估計運維睡了，晚點手動操作下。😄

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