您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

除了 filter 还有什么置灰网站的方式?

时间:2022-12-05 15:09:44  来源:今日头条  作者:闪念基因

大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:

 

当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 css,就能实现全站置灰的方式。

像是这样,我们仅仅需要给 html 添加一个统一的滤镜即可:

html {
    filter: grayscale(.95);
    -webkit-filter: grayscale(.95);
}

又或者,使用 SVG 滤镜,也可以快速实现网站的置灰:

<div>
// ...
</div>

<svg xmlns="https://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>
html {
    filter: url(#grayscale);
}

大部分时候,这样都可以解决大部分问题。不过,也有一些例外。譬如,如果我们仅仅需要置灰网站的首屏,而当用户开始滚动页面的时候,非首屏部分不需要置灰,像是如下动图所示,该怎么办呢?

看看示意:

 

这种只置灰首屏的诉求该如何实现呢?

使用 backdrop-filter 实现滤镜遮罩

这里,我们可以借助 backdrop-filter 实现一种遮罩滤镜效果。

filterVSbackdrop-filter

在 CSS 中,有两个和滤镜相关的属性 -- filter 和 backdrop-filter。

backdrop-filter[1] 是更为新的规范推出的新属性,可以点击查看 Filter Effects Module Level 2。

  • filter:该属性将模糊或颜色偏移等图形效果应用于元素。
  • backdrop-filter:该属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

注意两者之间的差异,filter 是作用于元素本身,而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。而它们所支持的滤镜种类是一模一样的。

backdrop-filter 最为常见的使用方式是用其实现毛玻璃效果。

看这样一段代码:

<div class="bg">
    <div>Normal</div>
    <div class="g-filter">filter</div>
    <div class="g-backdrop-filter">backdrop-filter</div>
</div>
.bg {
    background: url(image.png);
    
    & > div {
        width: 300px;
        height: 200px;
        background: rgba(255, 255, 255, .7);
    }
    .g-filter {
        filter: blur(6px);
    }
    .g-backdrop-filter {
        backdrop-filter: blur(6px);
    }
}

CodePen Demo -- filter 与 backdrop-filter 对比[2]

filter 和 backdrop-filter 使用上最明显的差异在于:

  • filter 作用于当前元素,并且它的后代元素也会继承这个属性
  • backdrop-filter 作用于元素背后的所有元素

仔细区分理解,一个是当前元素和它的后代元素,一个是元素背后的所有元素

理解了这个,就能够明白为什么有了 filter,还会有 backdrop-filter。

使用 backdrop-filter 实现首屏置灰遮罩

这样,我们可以快速的借助 backdrop-filter 实现首屏的置灰遮罩效果:

html {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
}
html::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(95%);
    z-index: 10;
}

仅仅只是这样而已,我们就在整个页面上方叠加了一层滤镜蒙版,实现了只对首屏页面的置灰:

 

借助 pointer-events: none 保证页面交互

当然,这里有个很严重的问题,我们的页面是存在大量交互效果的,如果叠加了一层遮罩效果在其上,那这层遮罩下方的所有交互事件都将失效,譬如 hover、click 等。

那该如何解决呢?这个也好办,我们可以通过给这层遮罩添加上 pointer-events: none,让这层遮罩不阻挡事件的点击交互。

代码如下:

html::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(95%);
    z-index: 10;
  + pointer-events: none;
}

CodePen Demo -- Gray Website by backdrop-filter[3]

当然,有同学又会开始质疑了,backdrop-filter 虽好,但是你自己瞅瞅它的兼容性,很多旧版 firefox 不支持啊大哥。我们那么多火狐的用户咋办?

截至至 2022/12/01,Firefox 的最新版本为 109,但是在 Firefox 103 之前,都是不支持 backdrop-filter 的。

别急,除了 filter 和 backdrop-filter,我们还有方式能够实现网站的置灰。

借助混合模式实现网站置灰

除了 filter 和 backdrop-filter 外,CSS 中另外一个能对颜色进行一些干预及操作的属性就是 mix-blend-mode 和 background-blend-mode 了,翻译过来就是混合模式。

如果你对混合模式还比较陌生,可以看看我的这几篇文章[4]

  • 不可思议的颜色混合模式 mix-blend-mode[5]
  • 不可思议的混合模式 background-blend-mode[6]
  • CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果[7]
  • 利用混合模式,让文字智能适配背景颜色[8]

这里,backdrop-filter 的替代方案是使用 mix-blend-mode。

看看代码:

html {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background: #fff;
}
html::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 10;
}

我们还是叠加了一层额外的元素在整个页面的首屏,并且把它的背景色设置成了黑色 background: rgba(0, 0, 0, 1),正常而言,我们的网站应该是一片黑色的。

但是,神奇的地方在于,通过混合模式的叠加,也能够实现网站元素的置灰。我们来看看效果:

 

经过实测:

{
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
}

上述 3 个混合模式,叠加黑色背景,都是可以实现内容的置灰的。

值得注意的是,上述方法,我们需要给 HTML 设置一个白色的背景色,同时,不要忘记了给遮罩层添加一个 pointer-events: none。

CodePen Demo -- Gray Website By MixBlendMode[9]

总结一下

这里,再简单总结一下。

  1. 如果你需要全站置灰,使用 CSS 的 filter: grayscale()
  2. 对于一些低版本的浏览器,使用 SVG 滤镜通过 filter 引入
  3. 对于仅仅需要首屏置灰的,可以使用 backdrop-filter: grayscale() 配合 pointer-events: none
  4. 对于需要更好兼容性的,使用混合模式的 mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式

有个小技巧,在 CSS 的世界中,但凡和颜色打交道的事情,你都应该想起 filter、backdrop-filter 和 mix-blend-mode。

最后

好了,本文到此结束,希望本文对你有所帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

参考资料

[1]

backdrop-filter: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty

[2]

CodePen Demo -- filter 与 backdrop-filter 对比: https://codepen.io/Chokcoco/pen/WNjebrr

[3]

CodePen Demo -- Gray Website by backdrop-filter: https://codepen.io/Chokcoco/pen/zYaJQJm

[4]

几篇文章: https://Github.com/chokcoco/iCSS/issues?q=is%3Aopen+label%3A%E6%B7%B7%E5%90%88%E6%A8%A1%E5%BC%8F

[5]

不可思议的颜色混合模式 mix-blend-mode: https://github.com/chokcoco/iCSS/issues/16

[6]

不可思议的混合模式 background-blend-mode: https://github.com/chokcoco/iCSS/issues/31

[7]

CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果: https://github.com/chokcoco/iCSS/issues/140

[8]

利用混合模式,让文字智能适配背景颜色: https://github.com/chokcoco/iCSS/issues/169

[9]

CodePen Demo -- Gray Website By MixBlendMode: https://codepen.io/Chokcoco/pen/poKOmxp

[10]

Github -- iCSS: https://github.com/chokcoco/iCSS

 

作者:SbCo

来源:微信公众号:iCSS前端趣闻

出处
:https://mp.weixin.qq.com/s/pwXyZ-MAemaBhlPC6KM0hA



Tags:   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Meta如何将缓存一致性提高到99.99999999%
介绍缓存是一种强大的技术,广泛应用于计算机系统的各个方面,从硬件缓存到操作系统、网络浏览器,尤其是后端开发。对于Meta这样的公司来说,缓存尤为重要,因为它有助于减少延迟、扩...【详细内容】
2024-04-15  Search:   点击:(1)  评论:(0)  加入收藏
兄弟,王者荣耀的段位排行榜是通过Redis实现的?
在王者荣耀中,我们会打排位赛,而且大家最关注的往往都是你的段位,还有在好友中的排名。作为程序员的你,是否思考过这个段位排行榜是怎么实现的?了解它的实现原理,会不会对上分有所...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
雷军:10年编程路,给程序员的几点建议
随着小米SU7的火热发售,雷军凭借“跨界灭霸”称号又一战封神。作为中国互联网历史上极富传奇色彩的连续创业者,他向大家生动地诠释了“人生在于奋斗”的真谛。雷军作为中国第...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
5月新政策实施,电动车将成严查对象,网友无奈:这还咋接孩子?
随着城市交通的增加,电动车作为一种便捷的出行方式,已成为很多家庭的选择,尤其在短途出行如接送孩子或购买日用品时。然而,电动车的普及也带来了不少交通安全问题。为了提高道路...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
新“国九条”,你真看懂了吗?
4月12日盘后,A股迎来十年一遇的超级重磅利好!时隔10年,国务院再次发布针对资本市场的“国九条”,并出台了大量极为重磅、有针对性的指导指示。前两次的“国九条”,先后发布在2004...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
网友喊话刘强东开直播 京东回应:在准备
快科技4月15日消息,前不久京东宣布,将投入10亿元现金和10亿流量加码短视频,吸引更多原创作者和优质内容机构入驻。此消息一出就引发了网友的关注,对于刘强东下场直播的呼声也是...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
4月央行缩量续做1000亿MLF,中标利率保持不变
4月中期借贷便利(MLF)操作结果出炉,央行连续两个月缩量续做MLF,同时作为中期政策利率的1年期MLF利率连续8个月保持不变。4月15日,中国人民银行发布公告称,为维护银行体系流动性合...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
知名早教机构跑路,背后职业闭店人产业链浮出水面
4月14日,#央视曝光职业闭店人#这个话题冲上热搜引发关注。据报道,近日,“金宝贝”早教机构频繁闭店一事引发大量关注,有多位家长表示,出现了“第三方”进行线上及线下的沟通协调...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
无出境记录!警方披露“猫一杯炮制秦朗事件”详情
今年春节假期,“秦朗巴黎丢寒假作业”事件曾占据多个热搜榜单,众多自媒体竞相跟进炒作,衍生出“秦朗舅舅”“西场小学”等多个话题。近日,警方通报“在巴黎拾到小学生秦朗作业本...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
SU7限时4月19日可改配置!小米:会显著推迟交付时间
快科技4月15日消息,小米SU7自从上市以来,已经积累了无数订单,如今下单交车时间超过半年。需要注意的是,因为当天晚上很多车主都在赶时间抢购,希望早日提车,所以下定的配置可能并没...【详细内容】
2024-04-15  Search:   点击:(2)  评论:(0)  加入收藏
▌简易百科推荐
Meta如何将缓存一致性提高到99.99999999%
介绍缓存是一种强大的技术,广泛应用于计算机系统的各个方面,从硬件缓存到操作系统、网络浏览器,尤其是后端开发。对于Meta这样的公司来说,缓存尤为重要,因为它有助于减少延迟、扩...【详细内容】
2024-04-15    dbaplus社群  Tags:Meta   点击:(1)  评论:(0)  加入收藏
Netflix 是如何管理 2.38 亿会员的
作者 | Surabhi Diwan译者 | 明知山策划 | TinaNetflix 高级软件工程师 Surabhi Diwan 在 2023 年旧金山 QCon 大会上发表了题为管理 Netflix 的 2.38 亿会员 的演讲。她在...【详细内容】
2024-04-08    InfoQ  Tags:Netflix   点击:(3)  评论:(0)  加入收藏
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(8)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(15)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(11)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(8)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(14)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(10)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(12)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(13)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条