CSS3新增颜色表示方式 Transparent属性 Opacity属性

1.

（1）RGBA 模式

（2）HSL 模式

（3）HSLA 模式 

 

2.RGBA模式

• RGBA
  • 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

• 取值：
  • R： 红色值。正整数 | 百分数
  • G： 绿色值。正整数 | 百分数
  • B： 蓝色值。正整数 | 百分数
  • A： Alpha透明度。取值0~1之间。

 

2.HSL模式

• 色轮模式

• 取值：
  • H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  • S： Saturation(饱和度)。取值为：0.0% - 100.0%
  • L： Lightness(亮度)。取值为：0.0% - 100.0%

 

3.HSLA模式

• 色轮模式
• 取值：
  • H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  • S： Saturation(饱和度)。取值为：0.0% - 100.0%
  • L： Lightness(亮度)。取值为：0.0% - 100.0%
  • A： Alpha透明度。取值0~1之间。

 

4.Transparent属性

• 特殊颜色值，表示透明色，可以直接当做颜色使用

• 例如：
  • color:transparent设定字体颜色为透明

 

5.Opacity属性

• 作用：设定元素的透明度
• 聚会：0~1之间

• 注意：对于尚不支持opacity属性的IE浏览器，添加滤镜为filter:alpha(opacity=50)