大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样： 当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行CSS，就能实现全站置灰的方式。 像是这样，我们仅仅需要给HTML添加一个统一的滤镜即可：html｛filter：grayscale（。95）；webkitfilter：grayscale（。95）；｝ 又或者，使用SVG滤镜，也可以快速实现网站的置灰：。。。svgxmlnshttps：www。w3。org2000svgfilteridgrayscalefeColorMatrixtypematrixvalues0。33330。33330。3333000。33330。33330。3333000。33330。33330。33330000010filtersvghtml｛filter：url（grayscale）；｝ 大部分时候，这样都可以解决大部分问题。不过，也有一些例外。譬如，如果我们仅仅需要置灰网站的首屏，而当用户开始滚动页面的时候，非首屏部分不需要置灰，像是如下动图所示，该怎么办呢？ 看看示意： 这种只置灰首屏的诉求该如何实现呢？使用backdropfilter实现滤镜遮罩 这里，我们可以借助backdropfilter实现一种遮罩滤镜效果。filterVSbackdropfilter 在CSS中，有两个和滤镜相关的属性filter和backdropfilter。 backdropfilter〔1〕是更为新的规范推出的新属性，可以点击查看FilterEffectsModuleLevel2。filter：该属性将模糊或颜色偏移等图形效果应用于元素。backdropfilter：该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 注意两者之间的差异，filter是作用于元素本身，而backdropfilter是作用于元素背后的区域所覆盖的所有元素。而它们所支持的滤镜种类是一模一样的。 backdropfilter最为常见的使用方式是用其实现毛玻璃效果。 看这样一段代码：Normalfilterbackdropfilter。bg｛background：url（image。png）；p｛width：300px；height：200px；background：rgba（255，255，255，。7）；｝。gfilter｛filter：blur（6px）；｝。gbackdropfilter｛backdropfilter：blur（6px）；｝｝ CodePenDemofilter与backdropfilter对比〔2〕 filter和backdropfilter使用上最明显的差异在于：filter作用于当前元素，并且它的后代元素也会继承这个属性backdropfilter作用于元素背后的所有元素 仔细区分理解，一个是当前元素和它的后代元素，一个是元素背后的所有元素。 理解了这个，就能够明白为什么有了filter，还会有backdropfilter。使用backdropfilter实现首屏置灰遮罩 这样，我们可以快速的借助backdropfilter实现首屏的置灰遮罩效果：html｛position：relative；width：100；height：100；overflow：scroll；｝html：：before｛content：；position：absolute；inset：0；backdropfilter：grayscale（95）；zindex：10；｝ 仅仅只是这样而已，我们就在整个页面上方叠加了一层滤镜蒙版，实现了只对首屏页面的置灰： 借助pointerevents：none保证页面交互 当然，这里有个很严重的问题，我们的页面是存在大量交互效果的，如果叠加了一层遮罩效果在其上，那这层遮罩下方的所有交互事件都将失效，譬如hover、click等。 那该如何解决呢？这个也好办，我们可以通过给这层遮罩添加上pointerevents：none，让这层遮罩不阻挡事件的点击交互。 代码如下：html：：before｛content：；position：absolute；inset：0；backdropfilter：grayscale（95）；zindex：10；pointerevents：none；｝ CodePenDemoGrayWebsitebybackdropfilter〔3〕 当然，有同学又会开始质疑了，backdropfilter虽好，但是你自己瞅瞅它的兼容性，很多旧版firefox不支持啊大哥。我们那么多火狐的用户咋办？ 截至至20221201，Firefox的最新版本为109，但是在Firefox103之前，都是不支持backdropfilter的。 别急，除了filter和backdropfilter，我们还有方式能够实现网站的置灰。借助混合模式实现网站置灰 除了filter和backdropfilter外，CSS中另外一个能对颜色进行一些干预及操作的属性就是mixblendmode和backgroundblendmode了，翻译过来就是混合模式。 如果你对混合模式还比较陌生，可以看看我的这几篇文章〔4〕：不可思议的颜色混合模式mixblendmode〔5〕不可思议的混合模式backgroundblendmode〔6〕CSS奇技淫巧妙用混合模式实现文字镂空波浪效果〔7〕利用混合模式，让文字智能适配背景颜色〔8〕 这里，backdropfilter的替代方案是使用mixblendmode。 看看代码：html｛position：relative；width：100；height：100；overflow：scroll；background：fff；｝html：：before｛content：；position：absolute；inset：0；background：rgba（0，0，0，1）；mixblendmode：color；pointerevents：none；zindex：10；｝ 我们还是叠加了一层额外的元素在整个页面的首屏，并且把它的背景色设置成了黑色background：rgba（0，0，0，1），正常而言，我们的网站应该是一片黑色的。 但是，神奇的地方在于，通过混合模式的叠加，也能够实现网站元素的置灰。我们来看看效果： 经过实测：｛mixblendmode：hue；色相mixblendmode：saturation；饱和度mixblendmode：color；颜色｝ 上述3个混合模式，叠加黑色背景，都是可以实现内容的置灰的。 值得注意的是，上述方法，我们需要给HTML设置一个白色的背景色，同时，不要忘记了给遮罩层添加一个pointerevents：none。 CodePenDemoGrayWebsiteByMixBlendMode〔9〕总结一下 这里，再简单总结一下。如果你需要全站置灰，使用CSS的filter：grayscale（）对于一些低版本的浏览器，使用SVG滤镜通过filter引入对于仅仅需要首屏置灰的，可以使用backdropfilter：grayscale（）配合pointerevents：none对于需要更好兼容性的，使用混合模式的mixblendmode：hue、mixblendmode：saturation、mixblendmode：color也都是非常好的方式 有个小技巧，在CSS的世界中，但凡和颜色打交道的事情，你都应该想起filter、backdropfilter和mixblendmode。最后 好了，本文到此结束，希望本文对你有所帮助：） 如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。参考资料 〔1〕 backdropfilter：https：drafts。fxtf。orgfiltereffects2BackdropFilterProperty 〔2〕 CodePenDemofilter与backdropfilter对比：https：codepen。ioChokcocopenWNjebrr 〔3〕 CodePenDemoGrayWebsitebybackdropfilter：https：codepen。ioChokcocopenzYaJQJm 〔4〕 几篇文章：https：github。comchokcocoiCSSissues？qis3Aopenlabel3AE6B7B7E59088E6A8A1E5BC8F 〔5〕 不可思议的颜色混合模式mixblendmode：https：github。comchokcocoiCSSissues16 〔6〕 不可思议的混合模式backgroundblendmode：https：github。comchokcocoiCSSissues31 〔7〕 CSS奇技淫巧妙用混合模式实现文字镂空波浪效果：https：github。comchokcocoiCSSissues140 〔8〕 利用混合模式，让文字智能适配背景颜色：https：github。comchokcocoiCSSissues169 〔9〕 CodePenDemoGrayWebsiteByMixBlendMode：https：codepen。ioChokcocopenpoKOmxp 〔10〕 GithubiCSS：https：github。comchokcocoiCSS 作者：SbCo 来源：微信公众号：iCSS前端趣闻 出处：https：mp。weixin。qq。comspwXyZMAemaBhlPC6KM0hA
苹果无创血糖项目取得重大进展智能可穿戴设备或迎新的发展机遇据媒体报道，苹果公司的一个可追溯至乔布斯时代的重大项目近期取得了重大进展。这个被称作E5的项目希望在不需要刺破皮肤取血的情况下测量人体的葡萄糖含量。如果此次技术取得完善，对糖尿病患交广会客厅守护春运的危石人看到列车安全通过，我们就放心了。2月1日上午，距离春运结束还有15天，作为守护孤石危岩护航桥隧安全的危石人，西昌工电段甘洛南桥路车间青年技术员鲜耀和车间的同事们深知春运已经迎来最后我国发射最复杂民商用通信卫星支持百万终端通信中国网讯（记者杨佳通讯员曹汉杰喻鹏胡煦劼）北京时间2023年2月23日19时49分，我国在西昌卫星发射中心使用长征三号乙运载火箭，成功将中星26号卫星发射升空，卫星顺利进入预定轨道培育不戴军衔的卫勤精兵联勤保障部队第901医院提高非现役人员遂行任务能力新闻调查编者按强军之道，要在得人。得人之要，必广其途以储之。如何让文职人员聘用制人员与现役官兵同频共振，一起为强军事业增砖添瓦，是摆在许多单位面前的一道现实课题。近年来，在无锡联勤保障中心我国开始严查，2023年这几类退休人员，这些人及其家属要当心了！导读我国开始严查，2023年这几类退休人员，这些人及其家属要当心了！点击上方普及三农头像关注，可了解更多普及三农精彩内容点击下方音频可以收听本篇全部内容，本篇文章阅读时长大约需要0苹果或推出无创血糖技术，A股可穿戴设备链迎来新机遇21世纪经济报道记者张赛男上海报道苹果近日曝光的一项技术受到市场高度关注。据知情人士透露，苹果最近在无创监测血糖技术领域取得了一些重大进展，目标是将血糖监测系统添加到苹果手表（Ap怀孕时肚子上的线是怎么回事？如果在孕中期或孕晚期腹部突然出现黑线，你完全不用担心。这正常现象，它是无害的。图片来源摄图网怀孕时可能会带来一些特殊的身体变化，比如意外的长出毛发突然消化不良痔疮和痤疮。但在不断增深圳9个项目入选！工信部2022年工业互联网试点示范名单公示近日，工业和信息化部公示2022年工业互联网试点示范名单，共分工厂类载体类园区类网络类平台类安全类六大方向。深圳共有9个项目入选，入选数量并列全国大中城市第二。截至目前，深圳已累计11岁的女孩来月经正常吗还长高吗？女孩儿11岁来月经一般是正常现象，并且月经初潮后还能长高。月经是受体内雌孕激素的影响，子宫内膜出现周期性增生脱落的生理现象。身高受遗传营养生长激素身体疾病的影响，月经来潮和身高之间江阴，喷泉回归了曾经，人民路上的喷泉是江阴一道亮丽的风景，是很多市民周末休闲游玩的地方。一道道水柱喷涌而起，喷泉将水的灵动与江南的柔美展现得淋漓尽致，在老江阴的记忆里大家熟知的喷泉有学院场喷泉广场荆州马拉松线路图来了！荆州市计划于2023年3月26日举办2023荆州马拉松（点击链接进入报名通道）赛事详细信息2023荆州马拉松新鲜出炉的线路图来了（点击图片查看大图）比赛起终点及路线（一）马拉松（4