BAT 用一行代码实现了网页黑白显示

共 1420字,需浏览 3分钟

 ·

2020-04-05 23:30

0fa3fae1f87f4f939c5ed9db6f80d496.webp


4月4日全网页面置灰,「Vue虚拟实验室」也不例外。

在前端最少只用“一行”代码即可搞定。那么是如何实现的呢?

我们先看看以下公司是如何实现的呢?

1、百度

4052ce9a02e5c70e640e1b67774428e0.webp

fc6db833d89e7ad1ac472b887d29a47b.webp


2、今日头条

7af59d71abea95d906cc4ded71b3ff4e.webp

19fb84112c283d91c7603fc737aeeb64.webp


3、阿里云

7fd6326e0db154dc976b27f3c622273e.webp

30566d3dd64d576d779b796bbc48df33.webp


4、腾讯

2985abc9827a3ba2182f3bdc29022cfc.webp

e2701967b6ec390b539a65403260c6f0.webp


从上面的实现方式可以看到,关键技术是利用了 CSS 的 filter 技术,也就是 CSS 的滤镜功能。

我们看看 MDN 关于 filter 的描述:

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.

大意是使用 filter 可以给 HTML 元素添加一些效果,比如模糊、颜色偏移,通常用于调整图像,背景和边框的渲染。

CSS 标准里包含了一些预定义效果的函数,你也可以通过一个URL 使用 SVG 滤镜元素(SVG filter element)。

我们分析下下面这段代码:

e2701967b6ec390b539a65403260c6f0.webp

grayscale: 函数是 CSS 预定义的函数,主要作用是将图像转换为灰度图像,通过具体的值定义转换的比例。若值为 100% 则完全转为灰度图像,值为 0% 图像无变化。

下面这些前缀都是为了适配不同的浏览器,不然会有兼容性问题:

844326e34bf178bffd331e7b85245276.webp

-webkit-filter谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说,所有基于WebKit 内核的浏览器;

-moz-filter火狐浏览器

-ms-filterIE浏览器 和 Edge浏览器

-o-filter旧版Opera浏览器

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1): 这个是个给 IE 浏览器添加滤镜的,IE 浏览器对 filter 支持的不是很好。

总之,上面写了一坨代码,都是为了更好支持不同的浏览器。



参考:

https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

https://blog.csdn.net/jiudihanbing/article/details/8372947



推荐阅读:

各种博客的代码高亮是如何实现的

太强了,从 0 到 1 搭建 vue-cli

让 Class 与 Style 动起来

众人拾柴火焰高 · Vue虚拟实验室




推荐阅读




我的公众号能带来什么价值?(文末有送书规则,一定要看)

每个前端工程师都应该了解的图片知识(长文建议收藏)

为什么现在面试总是面试造火箭?


浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报