rgba的透明度如何运作?

时间:2016-03-18 00:49:55

标签: css css3 rgba

我最近了解了用于在css中设置颜色的rgba。我很好奇透明度渠道的技术方面确实有效。

例如,如果我为两个单独的标题设置值为rgba(15,34,160,1)和rgba(15 34,160,0.5),则它们被称为具有相同的颜色,但是具有不同的不透明度值。我想知道的是这些颜色是否实际上是相同的。我的意思是,就光出射像素而言,它们肯定是不同的,以便创建两个不同的标题外观。这是否意味着alpha值实际上用于以某种特定方式改变颜色?

干杯!

4 个答案:

答案 0 :(得分:1)

因为你可以看到"半透明元素后面的元素的颜色,它将与该颜色混合(如果背景为白色,它将显得更亮,如果它是黑色,更暗,如果它是另一种颜色也会混合颜色。

因此,从技术上讲,它具有不同透明度的相同颜色,但感知结果将是不同的颜色(除非偶然透明背后的元素具有相同的颜色)

答案 1 :(得分:0)

RGB值是颜色,RGBA值是颜色加透明度。将其覆盖在彩色背景上时,可能会产生不同的表观颜色。所以是的,它们是相同的颜色,但根据它们的位置可能会产生不同的颜色。

答案 2 :(得分:0)

查看此JSFiddle

使用如下所示的顶级CSS属性:

background-color: rgba(225, 225, 225, 0.7);

最后一个值是从0到1测量的不透明度(与透明度相反).0是完全透明的,1是完全不透明的。前三个值就像常规的rgb()CSS属性一样。

答案 3 :(得分:0)

通过设置RGBA颜色值。您只需设置颜色和单独的不透明度值。这可以通过使用RGB设置颜色然后使用不透明度分别设置不透明度来实现,但RGBA将两者组合成单个功能。使用RGBA较短,但分别设置RGBA和不透明度可让您分别控制值。

因此,您的两个示例是为颜色设置相同的值,但对该颜色应用两种不同的不透明度。