一.前言
今天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的灰色滤镜无法作用到它身上。
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
