晚上下班回来兴致冲冲得准备看看vue.js,结果发现根本看不懂,和当初一开始看js一样,真的是一脸懵逼,想起来翁恺老师的css入门课,虽然说css实习期间有了很大的提升而且也自学过一部分,但是觉得翁恺老师这里一定会讲一些细节,另外因为翁恺老师声音好听,讲得也有趣,所以就自然而然打开看了一节,不知不觉就get到了小技巧
css中 color , background-color 可以通过三种方式来设置:十六进制色,rgb和rgba .
一、十六进制色
你可能会说,这有什么?我也知道。
但是你知道为什么#fffffff代表的纯白,#ff0000代表纯红吗?
翁恺老师告诉我了,#__ __ __ 这三个空白位置分别,代表red,green,blue要填写两位十六进制数。
所以#ff 00 00 ,red部分为最大值ff,其余为0,代表红色最纯,绿色蓝色不上色。
#fff ff ff ,有一些常识的小伙伴都知道,红绿蓝三种纯色混合,产生白色,此处亦然。
二、rgb(x,y,z)
这三个参数是从0~255的十进制数,和十六进制色表示原理基本一致,不再赘述
三、rgba(x,y,z,α)
这是今晚发现的最有趣的一个部分,x,y,z同上,α指的是α通道,可以理解成牛排的成熟程度,越成熟,假设牛排越熟颜色越纯,可以取0~1之间的浮点数,取1时代表100%得使用这个rgb颜色,和牛排一样,全熟;取0.2时,代表20%使用这个rgb颜色,类比二成熟的牛排,unbelievable...直观,上图
其实get到rgba的α这个参数,一方面可以做简单的渐变效果,但是更重要的是可以加速开发,在写一些小demo的时候,不用再在使用什么颜色上纠结。
分享完毕,收拾睡觉!
努力成为优秀的前端工程师!
>期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:
> - SegmentFault技术圈:[ES新规范语法糖](https://segmentfault.com/g/1570000010695363)
> - SegmentFault专栏:[趁你还年轻,做个优秀的前端工程师](https://segmentfault.com/blog/chennihainianqing)
>- 知乎专栏:[趁你还年轻,做个优秀的前端工程师](https://zhuanlan.zhihu.com/wyasy)
>- Github博客: [趁你还年轻233的个人博客](https://github.com/FrankKai/FrankKai.github.io)
>- 前端开发QQ群:660634678
>- 微信公众号: 人兽鬼 / excellent_developers
![](https://upload-images.jianshu.io/upload_images/2976869-157e8624bcdfd62a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
>努力成为优秀前端工程师!