最近几天,大家有没有发现大部分网站都瞬间变灰色了由于我们敬爱的江泽民同志患白血病合并多脏器功能衰竭,抢救无效,于2022年11月30日12时13分在上海逝世,享年96岁国家降半旗,几乎所有的知名网站,首页都变成灰色的了,达深切哀悼我们敬爱的江泽民同志! 。
可能有许多小伙伴好奇这是怎样做到的?其实很简单,前端工程师们只需要一行代码就可以解决 我们只需要在网站的首页后台代码加入这么一段代码,就可以实现了!html {
filter: grayscale(100%);}如下图所示:
见变灰效果:
前端技术解析效果:grayscale(amount) : 对图片进行灰度转换amount转换值的大小,可以是数字或百分比当值为 100% 时,灰度最大0% 时与原图没有区别0% 到 100% 之间的值会使灰度线性变化。
amount 为空时使用值为1还有一些其他效果,大家可以自己去试试看/*blur 模糊*/filter:blur(2px);/*brightness 亮度*/filter:brightness(25%);
/*contrast 对比度*/filter: contrast(50%);/*drop-shadow 阴影*/filter: drop-shadow(5px5px5px rgba(0, 0, 0, 0.5
));/*opacity 透明度*/filter: opacity(50%);/*grayscale 灰度*/filter: grayscale(80%);/*sepia 褐色*/filter: sepia(
100%);/*invert 反色*/filter: invert(100%);/*hue-rotate 色相旋转*/filter:hue-rotate(180deg);/*saturate 饱和度*/
filter: saturate(1000%);就这么简单。不妨大家都试一试。— 完 —关注公众号后,回复下面关键词获取回复 加群,加入前端程序员技术交流群
回复 面试,获取最新大厂面试资料回复 简历,获取 3200 套 简历模板回复 TypeScript,获取 TypeScript 精讲课程回复 uniapp,获取 uniapp 精讲课程回复 Node,获取 Nodejs+koa2 实战教程
回复 架构师,获取 架构师学习资源教程更多教程资源应用尽有,欢迎 关注获取“在看和转发”就是最大的支持
亲爱的读者们,感谢您花时间阅读本文。如果您对本文有任何疑问或建议,请随时联系我。我非常乐意与您交流。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。