如何在网页置灰的时候，部分元素保持彩色-有意思的面试题原创

哈喽，同学们大家好，我是大圣啊，今天我们来聊一个面试题，叫做网页一键智挥啊，当然了，网上已经有很多教程了，我们今天要讨论的问题是如何在网页一键制灰的这个前提下呢，保持部分元素的彩色，我们来看一下这个需求啊。啊，我们看一下这个现在的。我做完的一个效果，首先呢，我全部指挥比较简单，我们点击这个全部智挥按钮，它就是所有元素都指灰，然后呢，我们这个我们的坤坤啊，现在也全部都是灰色的。当然了，我们还可以，呃有另外一个效果，就是首屏部分智慧，比如说我们点击它有一个元素是保持彩色的，然后呢，而且是首屏啊，你看我们底下这个坤坤的篮球是彩色，但它的头已经是灰色啊，就是呃这个其实也算是呃完成了我们这个需求，但兼容性有一点点小问题，待会儿我在代码上进行体验，然后还有一个是针对呃元素的一个啊，一个这个保湿彩色点击它。

啊，就会元素级的，像图片呀，Div啊，还有整个video啊，都可以依然保持彩色，那这个怎么实现呢？我们下面来代码中进行体验，首先我们这边有一个空白的页面。啊，空白的页面，然后现在全部都是，呃，空白的div和这些标签啊，没有左边是没有任何的GS代码的。如果我们想让全部的页面都置灰，直接加上一个质蛋塞塞就可以。把它粘到我们的页面上，Star标签里面。但我现在写的div和CSS都是为了实现这个非常的布局啊，并没有额外的含义，我们刷新一下。知乎就已经实现了，然后如果你对兼容性要求高一点的话，你就可以除了一个filter之外呢，还要加上很多浏览器的前缀，像K呀，像底下像这种支持IE浏览器的，就像我们看一下像百度这种智挥啊，采用的就是我们这种写法啊，写了大概呃六七个吧啊兼容性比较好TOC的产品，那如果你的产品是只针对现代浏览器的，比如知乎，对吧，其实你只写两个。

Filter和web k的filter也是OK的啊，这两个几个方案大家知道就好，那这样第一步就完成了啊，就一句话或者是一行C代词就解决了这个问题，那么我们的问题是如何在这个智慧的前提下保持部分原色彩色呢？这是一个非趁的面试题，这也是我看到一个推文啊，出了一个题我就尝试做一下，首先呢啊，我们先第一步先把整个这个制灰的过程呢，把它变成可配置的动态，现在是我们要既写CSS也要写GS，我们底下重要代码我们把它copy一下。放在这个SC标签里面，然后把这个叫set GR这个ID呢改成杠二。啊，然后上面呢，我们有三个按钮，分别是all first和。OK，然后中间是一堆Di啊，主要凸显这个嵌套关系。然后最底下还有一个呃，一个video，然后我们这段代码是用JS，然后在网页上新建一个star标签，然后这个star标签里面呢，会有一个点degree filter这个class，然后它里面就是我们所有指挥的这些样式，然后当我们这个按钮在click的时候呢，会执行这个set or GR这个方法，这个方法做的事情就是把我们的root。

啊，也就是说我们的HTML标签上面会切换这个，这个叫。呃，这个class，然后来实现，我们也可以右键。点这个检查元素，可以看到在我们的HTML啊，我们右脚啊滑一下。我们点一下指挥。可以看到它是切换出了一个叫gra filter这个class来实现啊。然后取消，就把这class删掉就可以了，这是第一种情况，那然后啊，我们就来到我们的面试的主题，如何让这个元素保持部分彩色呢？啊首先其实我们最直观的想法是，比如说我这个页面里面有一个叫叫啊有一个class叫not GR not GR，然后呢，它是一个图片对吧？那我们能不能在这个设置设置这个灰色的前提之下。

然后在样式里面写一段代码。叫点not agree3，然后filter是闹啊，我们重置一下filter，然后事实证明是不可以的。啊，它依然是全部是灰色，我们没有办法解决这个问题。啊，那第二点啊，我们可以做的是事情是什么呢？我本来想尝试去写有没有filter一个属性能够反转这个过滤器，然后我就查了一些资料，发现这个呃，Chrome它里面灰色100%的算法呢，大概就是从RGB这三个这个位置上三个这个颜色值上取一定的系数，然后加在一起，然后每个相位都算一下，然后我我本身在图像处理方面比较菜，所以呢，这个全灰的算法看起来呢是不可逆的，就不能重新算回来了，那所以呢，我就采用了一些别的一些方法，比如说我们现在用的方法叫。遮挡解决方案，之前的filter是过滤全部网页，那我们现在其实可以设置一个遮挡，这个属性叫backdrop filter就在整个页面上，我们只照上一个灰色的一个一个弹层啊，就整个一个灰色，巨大一个div，我们可以用这个代码来实现。

啊，这个HTML代码，我们把它放到我们的这个CS之上。而这个RTML保持我们的position是relative，这没啥说的，Rtl before，也就是说加上一个伪类，这个伪类呢，啊，生成一个position fixed，然后它这个弹窗。出来的模态窗，然后呢，是一个呃，这个全灰的一个颜色，并且呢，记得用这个pointit摄纳，这样不会阻止底下的交互，然我们来刷新一下这个页面。啊，其实也就实现这个全局的智慧啊，全局的智慧，那如如果我们把这个face改成absolute。刷新一下，就会实现一个非常有趣的一个叫呃，首屏智慧。我们来看一下。啊，只有手屏是灰色，比别的地方都是彩的啊，都是彩的这个这个效果啊，这个效果。

OK，那这种情况下我们如何实现某一个div的特殊高量呢？那我们就可以把我们刚才这个叫叫not agree。这里。把它粘上了啊，然后position设置成一个。啊，一个相对定位，然后呢，我们的Z-index之前的弹窗是100，我们现在把它设计成1000啊，让它飘出来啊，层级飘出来刷新一下啊就可以保证啊这个只要是设置了叫叫not gr3热class都可以在当前的这个div之下呢，指挥的解决方案下保持彩色，哎，这个看起来就是一个很不错的一个解决方案，而且F本身呢，可能还有会有一点点的性能损耗，对吧，所以呢，就实现了这个效果，那那个这个暂时实现了，OK，而且呢，还实现了非常骚包的这个首屏智慧的一个效果，那但是它其实也有一个小问题。

啊，这个小问题就是我们本身来说，呃，Filter它的兼容性还是比较好的，我们可以仔细看一下这个图啊，基本上主流浏览器都是飘绿的。啊，Filter，而且的版本支持都比较好，但是backdrop filter它的主流版本浏览器呢，就是一般啊，尤其是far。Firefox版本它只支持到了103，要知道我我现在本地最新的版本我才装到了108。哎，107好像。也就是说，只有最新的firefox才支持，很容易就失效了。啊，所以这是back这个filter这个解决方案的主要的问题啊。这个，那我们啊，既然他有兼容性问题，那我们就回来再讨论一个解决方案，也就是说我们其实可以通过这个，我们整个浏览器的标签是一棵树，那我们既然可以设置某一个元素的，它的filter是灰色，那么我们可以就精确的定位到哪些元素设置，哪些元素不设置。对吧，然后我们采用的方法就是。

呃，基于一些选择器，我们把这个代码给大家演示一下。比如说我们我们设置把这个代码粘过来。这段代码的意思就是我们在select里面设置一些选择器。这个选择器啊，就是我们这个保持彩色的元素啊，这个元素我们设置完成之后，然后你看一下它的这个select啊，我们我们便利这个select，然后把select选中所有的DOM元素呢啊，这个DOM节点上都标记一个叫sta color。啊，Sta color，然后sta变为处之后呢，我们我们向上变利，它所有的parent里面都。这个标记一个水平，叫colorful。那这样的话，我们每一个属性啊，每一个div是不是彩色就都已经标记完毕了，然后我们再来执行第二段代码。这段代码意思就是啊，我们便利从上到下，这个时候我们每个节点啊，本身是要彩色标记成是要带color它的副元素啊，如果这个彩色的副元素就标记成叫colorful。

啊，就colorful，然后呢，我们就work整个DOM节点数啊，如果这个DOM节点是sta color直接存啊，就是说明你不用什么都不用干，如果它是没有卡拉，就当前这个节点没有标记卡拉，那它一定是需要置挥的，所以我们就把它的克拉，这个制挥的克拉给它选择上，然后呢在递归执行整个这个过程就可以了，就只要你没有标记，我就把你置灰，然后return，只要你标记了，我就继续向下遍历，这样的话，我们就可以精确的把这个制灰的这个class呀，精确的赋制给所有需要制灰的元素，而剩下的元素，那当然就是我们的高亮元素啊，我们大概最后再看一下这个效果。这个效果就是我们选了一个not GR和呃，Class是not GR，还有ID是not gr2啊，这样的话，我们的页面的div中啊，这个视频是not gr2。然后呢，这个div和这个图片是not gr3，我们最后再来看一下这个效果。

部分指挥。啊，就实现了这个效果，所以呢，我觉得这种这种东西啊，或者说这个这种情况，其实大部分情况都遇遇不到，但是我觉得作为一个面试题的话，我觉得可以考察到面试者的CSS技术，呃，GS到我们的便利技术，还有一些递归思想以及兼容性问题，我觉得是一个非常不错的面试题，这个题你会了吗？