📌  相关文章
📜  CSS3-颜色

📅  最后修改于: 2020-10-26 04:57:25             🧑  作者: Mango

CSS3支持以下其他颜色属性-

  • RGBA颜色
  • HSL颜色
  • HSLA颜色
  • 不透明度

RGBA代表Red Green Blue Alpha。它是CSS2的扩展，Alpha指定颜色的不透明度，参数编号是0.0到1.0之间的数字。 RGBA的示例语法如下所示-

#d1 {background-color: rgba(255, 0, 0, 0.5);} 
#d2 {background-color: rgba(0, 255, 0, 0.5);}  
#d3 {background-color: rgba(0, 0, 255, 0.5);}

HSL代表色相，饱和度和亮度。这里的Huge是色轮上的度数，饱和度和亮度是0到100％之间的百分比值。 HSL的示例语法如下所示-

#g1 {background-color: hsl(120, 100%, 50%);}  
#g2 {background-color: hsl(120, 100%, 75%);}  
#g3 {background-color: hsl(120, 100%, 25%);}

HSLA代表色相，饱和度，亮度和alpha值。 Alpha值指定不透明度，如RGBA所示。 HSLA的示例语法如下所示-

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}  
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}  
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

不透明性是较薄的涂料，需要添加黑色以增加不透明性。不透明度的示例语法如下所示-

#g1 {background-color:rgb(255,0,0);opacity:0.6;}  
#g2 {background-color:rgb(0,255,0);opacity:0.6;}  
#g3 {background-color:rgb(0,0,255);opacity:0.6;}

以下示例显示了rgba颜色属性。

现场演示

   

   
      
RGBA colors:

      
Red

      
Green

      
Blue

它将产生以下结果-

下面的示例显示HSL颜色属性。

现场演示

   

   
      
HSL colors:

      
Green

      
Normal Green

      
Dark Green

它将产生以下结果-

以下示例显示了HSLA颜色属性。

现场演示

   

   
      
HSLA colors:

      
Less opacity green

      
Green

      
Green

它将产生以下结果-

下面的示例显示Opacity属性。

现场演示

   

   
      
HSLA colors:

      
Red

      
Green

      
Blue

它将产生以下结果-