Java基础、中级、高级、架构面试资料

只需6行filter grayscale代码就可以将网站变灰!

HTML5 herman 6384浏览
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog2,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云

上周,微信群一网友问我,如何将网站变灰?

我说最近没发生什么大事呀,怎么突然来这一需求?

他说,部门领导接到上级需求,要求将来如果发生某些突然事件时,要能够支持将网站变灰,像各大厂的做法一样。

我说,你直接百度一下,不就知道了吗?

他给我截了一个图,瞬间知道了百度的好用。

于是,我用谷歌查找了一番,发现做法非常简单。简单的 6 行代码就能搞定。

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

我这纯 Java 后端都能搞定和看懂。

上面这些函数中,主要用到了一个filter grayscale。搜索一下后得知,filter 属性定义了元素(比如<img>标签)的可视效果(例如:模糊与饱和度)。

常见的有 10 种用法。

1、grayscale 灰度(值为0-1之间的小数)

filter:grayscale(1); -webkit-filter:grayscale(1);

0 表示灰度为 0%,显示原图,1 表示灰度为 100% 灰色。

2、sepia 褐色(值为0-1之间的小数)

filter:sepia(1); -webkit-filter:sepia(1);

0 表示褐色度为 0%,显示原图,1 表示褐色度为 100% 显示褐色。

3、saturate 饱和度(值为num)

filter:saturate(1.8); -webkit-filter:saturate(1.8);

0 表示饱和为 0,图片显示黑白色,0.5 表示饱和度为原图的一半,1 表示饱和度等于原图,数值大于 1 表示饱和度加强。

4、hue-rotate 色相旋转(值为angle)角度deg

filter:hue-rotate(60deg); -webkit-filter:hue-rotate(60deg);

表示色相旋转的具体角度。

5、invert 反色(值为0-1之间的小数)

filter:invert(1);-webkit-filter:invert(1);

0表示不反色显示原图,1表示100%完全反色。

6、opacity 透明度(值为0-1之间的小数)

filter:opacity(0.5); -webkit-filter:opacity(0.5);

0表示完全透明,0.5表示半透明,1表示100%完全不透明。

7、brightness 亮度(值为num)

filter:brightness(2); -webkit-filter:brightness(2);

0 表示亮度为 0,显示黑色,0.5 表示亮度为原图的一半,1 表示原图亮度,数值大于 1 表示亮度加强。

8、contrast 对比度(值为num)

filter:contrast(1.8); -webkit-filter:contrast(1.8);

0 表示对比度为 0,为纯色,0.5 表示对比度为原图的一半,1 为原图对比度,数值大于 1,值越大,对比度越强。

9、blur 模糊(值为length)

filter:blur(5px); -webkit-filter:blur(5px);

表示虚化程度像素值。

10、drop-shadow 阴影

filter:drop-shadow(0 0 10px #000); -webkit-filter:drop-shadow(0 0 10px #000);

和 css3 box-shadow 属性值一致。多个属性值可以写一起,用空格隔开,类似 transform 多属性写法。


我分别用了上面的 6 行代码,发现各个网站都能被我变成灰色!

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » 只需6行filter grayscale代码就可以将网站变灰!