rgba 和 opacity 有什么区别?
- opacity是如何作用的?
rgba是什?如何代表的?
RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha的色彩空间。
Alpha和RGB的关系?
最初的概念来自于电影,电影制作需要前景和背景合成。 Mask是一种电影制作技巧,只有两种透明度,1和0,即完全透明和完全不透明。(Alpha也是在数字电影透明度做的一次改进) Alpha通道的产生是对数字合成的一大贡献。而Catmull/Smith小组开发的Alpha通道概念就方便了很多,而且可以让任何人使用Alpha通道。他们首次推出RGBA概念,即将Alpha通道和RGB通道并列,并一同存储在图像信息中。这样随着一幅图像的建立(这里说的是CGI),其Alpha通道也会随之产生或者存储。这样Alpha通道和图像信息一并存储和移动,有了RGBA的概念,数字合成变得更加轻松容易。当然为了提高合成效率。
RGB和RGBA的区别?
从字面上看是多一个A,A即Alpha的缩写,根据上RGB与Alpha的关系,可以简单的理解为可以在RGBA上设置透明度,可以设置的区间为【0,1】。
RGB 和HEX的区别与联系
what ? HEX是什么?
很多人写了很多年css也没懂HEX到底是什么?
Hexadecimal(十六进制),HEX是十六进制的简写
what?那为什么RGB的每个颜色的区间是【0,255】而HEX简写就只能是[00,FF]呢?
很简单,FF换算成10进制是什么?255! 那么#号呢? 个人认为可以理解为16进制的一种标识,就像RGB颜色设置的时候需要把每个色值写入到rgb()里面一样 从根本上说二者没有区别,都是对颜色的一种写法。
RGBA当中的A和opacity有什么区别呢?
个人理解,其实只要英语好一点,自己翻译下,就明白了。 opacity翻译为不透明度,Alpha可以理解为透明度。
那应该怎么使用Alpha和和opacity呢?
从效果上来看
上面是三个不同情况下的代码: 从上面看可以总结出以下几点:
RGBA 不会影响内部字体的颜色
其实不难理解,Alpha是通道的的透明度本质上是颜色的透明度,和元素没有任何的关系,和元素内部的字体更没有关系,所以内部字体不会受到影响,内部元素也不会受到影响
opactiy会影响内部字体颜色
不难理解,而且不仅是内部字体颜色,内部的元素都会都到这个影响,不透明度越大,整体的颜色越趋近于颜色本身,而不透明度越小越趋近于底色。
opacity叠加在css表现上类似继承
上图是文字叠加效果和透明度叠加效果 实际发现,字体的表现符合css本身的含义,即上层(子元素)会覆盖下层(父元素) 但是opacity是子元素和父元素透明度的叠加 其实也不难理解,如果透明度被覆盖了子元素为0.7,父元素为0.3时,如果此时表现为透明度为0.7不是很奇怪吗? 个人猜测,设计透明度的属性的时候还是为了方便,来做出的这样的决定,但是暂无资料支持,有懂得大佬欢迎交流
HEX 和 RGB 互相转换的思路及实现
其实根本上的目的就是10进制和16进制之间的转换 理清了这个目的之后,剩下的就是机械的写代码了。
下面是 rgb to hex的转换代码
https://github.com/blackcloud2333/hex-rgb/blob/master/rgbTohex.jsgithub.com