网站都变成灰色的了,代码是怎么实现的呢?
大家好,我是晨光。今天来聊一聊页面的滤镜,或者说换肤更合适些。根据技术栈不同,页面换肤可以分为 web 端和 app 端,因此本文通过以下两部分介绍
- PC 端
- APP 端
一、PC 端
有关 PC 端的一键换肤,这个操作常用,所以大概率是有某个全局字段或者属性来控制的。接下来看我是如何一步步
1、初步定位
一开始找这个滤镜,没有在根节点下,而是在各个图片的子节点查看是否有单独的滤镜。
但找了一圈之后发现,元素上并没有新增的样式,而且属性也没有修改。突破点在下图
1)表象,按钮颜色是灰色
2)元素上没有新增 class
3)样式中背景色还是绿色
因此,推测,滤镜或者颜色并不在单个元素上,肯定在外层,查看 根节点 #app,就发现了对应的滤镜属性
2、找到关键属性
经过十几分钟,终于找到了关键属性: filter: grayscale(100%);
并且是在根节点下,以 QQ 音乐举例,一键换肤,只需给根节点 #app 加上 上面的代码即可。具体效果如下图:
再来看下去掉的效果,页面的色彩也都恢复了
尝试修改滤镜值,看看效果
filter: blur(5px);
filter: contrast(200%);
filter: grayscale(80%);
filter: hue-rotate(90deg);
filter: drop-shadow(16px 16px 20px red) invert(75%);
感兴趣的朋友可在浏览器中进行尝试,对滤镜感兴趣的小伙伴,也可以参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/filter
二、APP 端
1、React Native
由于我负责的页面,没有涉及这方面的改动,所以对于这块不是很了解,根据搜索的资料,本地进行了尝试。但效果都不太理想。而且查看到的也只有对图片的颜色设置,没有看到关于整个页面的换肤方案。
1)方式一
<Image style={[styles.Icon, {tintColor: 'rgba(255,0,0,0.1)' }]} source={Source}>
使用 tintColor 属性,但是本地尝试添加该属性后,发现图片都不见了,取而代之都是设置的颜色值。
2)方式二
需要引入一个 npm 包,参考链接:https://github.com/iyegoroff/react-native-color-matrix-image-filters#supported-filters
大致使用方式如下:
但是晨光本地装了这个包之后,视图渲染时会有个报错
但是本地包的版本都是符合使用该组件的条件的。所以感觉这个方式也不是很靠谱,至于这个报错,晨光也没有过多的去解决。
2、Flutter
当然晨光没有进行尝试,但是大概率是可以整个也没实现 filter 滤镜的。
感兴趣的朋友可以查看:http://www.soiiy.com/flutter/12328.html
总结
整个换肤或者说给页面加滤镜的流程大致是这样,在根结点套上一层滤镜即可,但是看下来,pc端或者web端实现简单。而 app 端由于技术栈不同,且对 css 的支持也没有那么友好,所以实现起来可能略复杂。
所以这也就是为什么有点 app 是整个页面都加了滤镜,而有的只换了首屏,技术栈不同,导致有不同的换肤方案,做出的效果也参差不齐。
相关文章
- 干货 | 数字经济创新创业——数据是数字经济的基础
- Java开发编程指南 & 技术详解 续
- 干货 | 数字经济创新创业——农业和食品经济创新
- 原创 | AI顶会论文很多附带源代码?不少是假开源!
- Adobe Acrobat Pro DC-Mac上的PDF编辑器pdf编辑器全版本下载
- 优思学院|实施六西格玛管理带来的成本效益到底如何?
- 原创 | Attention is all you need 论文解析(附代码)
- PDF编辑处理软件Acrobat Pro DC 2020.006特别版PDF编辑器全版本下载
- 干货 | 数字经济创新创业——软件研究
- PDF阅读器 Adobe Acrobat Reader DC 2020 v2020.009.20063pdf编辑器下载
- 「Docker学习系列教程」基础篇小总结及高级篇预告
- 多数据源事务处理-涉及分布式事务
- PDF编辑无会员限制“神器”来了~解锁全部功能,太香了~pdf编辑器全版本下载
- Java并发之原子变量及CAS算法原理-合
- Adobe发布针对Acrobat、Reader和Photoshop CC的重要更新PDF编辑器全版本下载
- Adobe Acrobat Reader DC 2019 软件安装教程PDF编辑器全版本下载
- 《有什么用》第三期成功发布,Cube助力全球客户抢占智能时代新商机
- 记录IT笔记的工具
- Adobe Acrobat Dc 2021最新直装版Acrobat v2021.007.20091 下载及安装
- 查看Java编译后class文件的汇编指令时候提示:解决 Could not load hsdis-amd64.dll