一.前言
今天4月4日追悼會，敬所有抗疫戰爭的犧牲者。
大部分網站都將顏色變爲了灰色，這是如何實現的呢。
二.思路
1.首先想了mack遮罩，但看了看文檔好像不對啊，遮罩後全局都變爲不可點擊了，並不是想要的效果。
2.百度了一下，發現可以用filter來實現，於是就順着做下去了，大概的代碼是這樣
html{
filter:grayscale(1);
}
是的這就完了，只要在css里加入這兩句就能實現全局遮罩了，考慮兼容性的話可以多加幾行，這裏就不說了。
要是遇上了背景圖片無法變色的問題，可以繼續看下去
三.bug
1.起源：我嘗試將html的filter修改完畢，但卻發現還有個body標籤的背景圖沒有變化，於是產生了疑惑。
2.經過：
嘗試將該背景圖轉到別的標籤上，發現除了html標籤和body標籤，其他都是正常的，html標籤還可以解釋，但body標籤是html標籤的子級，爲什麼不行呢？
意識到可能是body和html的嵌套關係出了錯，百度了一下body標籤和html標籤的問題，看了一些文章，簡述一下。
3.示例：
首先看個代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: black;
border:green 1px solid;
}
div{
color:red;
width:100px;
height:100px;
border:1px solid red
}
</style>
</head>
<body>
<div>
一小塊
</div>
</body>
</html>
大家應該沒想到，body層外也是黑色的，照理說沒有給外層顏色，應該顯示爲白色。再添加幾行代碼
html{
background: yellow;
border:blue 1px solid;
}
最後測試發現，只有html標籤和body標籤會導致這個問題。
4.總結：
我的猜想是，在html之上還有一層，姑且稱爲瀏覽器層，默認爲全屏，而不是像html/body標籤隨內容變化而變化。若是html標籤中背景有值，那麼瀏覽器層會奪走html標籤的背景值給自身使用，若是html標籤中沒有，它就會去body標籤中尋找並奪走給自身使用，若是都沒有，則呈現白色。
無論是html被奪走還是body被奪走，這個標籤的背景值都會失效，看到的實際上是瀏覽器層的背景。
所以纔會產生最開始那個問題，body背景圖片沒有變黑白，因爲body背景被瀏覽器層“抓走了”，瀏覽器層位於html層的更上一層，所以html的灰色濾鏡無法作用到它身上。