CSS中的Alpha

CSS中关于透明度相关设定有三个地方,RGBA中的Alpha、颜色值设定中的transparent值、Opacity属性。

平时样式写的少,导致这些基本概念模糊,这里梳理Mark下。

alpha的单词含义

Alpha 通道 - 指定对象的不透明度。

曾经一直以为这个代表着透明度,跟opacity相反,当然这个认知是错的,为什么一直被误导,其中一个原因是该词在某些词典的解释误导人,如下为欧陆词典查词,其中一部分的解释。

不自觉就会以为alpha相关设定就会是透明度的设定,其实大大的错。

再看下权威词典比如牛津,意思只有一个希腊字母表的第 1 个字母。那为什么就跟透明度车上关系了,我又查了下WIKI中关于Alpha通道的含义,总算搞清了。

正如牛津词典所说Alpha意思是第一个字母,而发明Alpha通道的人,将其命名alpha的原因是这是非RGB色彩的第一个通道,因此命名Alpha。而Alpha通道的作用是图像合成,比如原先是255红色,而如今显示就要乘以这个alpha的值,因此也就会有透明度的效果,但是按照这个公式去理解其实是不透明度。所以如果alpha的值是0,就是完全透明,反之值是1的话,就会完全显示。

  • 理解了上述前因后果也就理解了网上其中一种观点,alpha并非透明度/不透明度,只是最终造成了透明度效果。

  • 但从不透明度,这个作用来说,CSS中alpha与opacity类似

alpha/transparent/opacity

  • alpha存在于RGBA函数中的一个值,而RGBA目前只存在于background-color中,因此这个不透明设定只服务于背景色,且需要知道背景色的不透明度即Alpha值并不存在继承。
  • transparent存在于颜色属性设定,其作用等价于rgba(0,0,0,0),效果会是透明。
  • opacity为单独的属性设定,即整个容器的不透明度,包含背景/文本

写在最后

so,CSS谈不上难,但是还是挺多东西的,继续学习。