📜  RGB 与 RGBA 颜色格式的区别

📅  最后修改于: 2021-08-30 12:56:58             🧑  作者: Mango

在本文中,我们将详细讨论 RGB 和 RGBA 配色方案之间的差异。我们还将看到如何在 CSS 中使用这些方案。

RGB 配色方案:它是一种三通道格式,包含红色、绿色和蓝色的数据。在 CSS 中,可以使用以下命令指定 RGB 颜色格式:

rgb(red, green, blue)

rgb()函数的每个参数定义了 0 到 255 范围内的颜色强度。值 0 定义没有使用该类型的颜色,而 255 定义使用的该颜色的最高值。

RGBA 颜色方案: RGBA 颜色格式是 RGB 方案的扩展,增加了指定颜色不透明度的 alpha 通道。在 CSS 中,可以使用以下命令指定 RGBA 颜色格式:

rgba(red, green, blue, alpha)

alpha 值声明为从 0 到 1 的十进制数,其中 0 表示完全透明,1 表示完全不透明。

下面的示例演示了这两种配色方案之间的差异。

例子:

HTML


  


  

    GeeksforGeeks   

  

    Difference between RGB and      RGBA color scheme   

    

An RGB color value is specified     with the rgb() function:     rgb(red, green, blue)   

       

An RGBA color value is specified      with the rgba() function:     rgba(red,green,blue,opacity)   

        
Red with rgb()
  
Color with rgb()
     
    Red with rgba()      and alpha   
  
    Color with rgba()     and alpha   


输出:

RGB 颜色格式和 RGBA 颜色格式的主要区别

RGB Color Format RGBA Color Format
RGB is a three-channel format containing data for Red, Green, and Blue. RGBA is a four-channel format containing data for Red, Green, Blue, and an Alpha value.
The CSS function rgb() has wide browser support. The CSS function rgba() may have limited support in the older browser.
The opacity of the color cannot be specified using this color format. The opacity of the color can be easily be controlled by specifying the opacity in terms of a parameter.
Example: The rgb(0, 0, 255) defines blue color as its value is set to highest(255), while others are set as 0. Example: The rgba(255, 0, 0, 0.3) defines the red color with opacity set to 0.3.