上一节:
下一节:

  CSS 颜色（高级）

  • RGBA颜色

    RGBA颜色值是RGB颜色值的扩展，带有alpha通道 - 指定颜色的不透明度。RGBA颜色值指定为：rgba（红色，绿色，蓝色，alpha）。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

    rgba（255,0,0,0.2）;

    rgba（255,0,0,0.4）;

    rgba（255,0,0,6.6）;

    rgba（255,0,0,0.8）;

    以下示例定义了不同的RGBA颜色：

    #p1 {background-color: rgba(255, 0, 0, 0.3);}  /* 红色不透明度 */
                #p2 {background-color: rgba(0, 255, 0, 0.3);}  /* 绿色不透明度 */
                #p3 {background-color: rgba(0, 0, 255, 0.3);}  /* 蓝色不透明度 */
    尝试一下

  • HSL颜色

    HSL代表色调，饱和度和亮度。

    HSL颜色值指定为：hsl（色调，饱和度，亮度）。

    1. 色调是色轮上的度数（从0到360）：
      • 0（或360）为红色
      • 120是绿色的
      • 240是蓝色的
    2. 饱和度是一个百分比值：100％是全彩色。
    3. 亮度也是一个百分比; 0％为深色（黑色），100％为白色。

    hsl（0,100％，30％）;

    hsl（0,100％，50％）;

    hsl（0,100％，70％）;

    hsl（0,100％，90％）;

    以下示例定义了不同的HSL颜色：

    #p1 {background-color: hsl(120, 100%, 50%);}  /* 绿 */
                                #p2 {background-color: hsl(120, 100%, 75%);}  /* 浅绿 */
                                #p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿 */
                                #p4 {background-color: hsl(120, 60%, 70%);}   /* 柔和的绿色 */
    尝试一下

  • HSLA颜色

    HSLA颜色值是HSL颜色值的扩展，带有alpha通道 - 指定颜色的不透明度。HSLA颜色值使用以下值指定：hsla（色调，饱和度，亮度，alpha），其中alpha参数定义不透明度。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。

    hsla（0,100％，30％，0.3）;

    hsla（0,100％，50％，0.3）;

    hsla（0,100％，70％，0.3）;

    hsla（0,100％，90％，0.3）;

    以下示例定义了不同的HSLA颜色：

    #p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* 绿色的不透明度 */
                        #p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 淡绿色的不透明度 */
                        #p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 深绿色的不透明度 */
                        #p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 淡绿色的不透明度 */
    尝试一下

  • 不透明度

    CSS opacity属性设置整个元素的不透明度（背景颜色和文本都是不透明/透明的）。opacity属性值必须在0.0（完全透明）和1.0（完全不透明）的数。

    rgb（255,0,0）;不透明度：0.2;

    rgb（255,0,0）;不透明度：0.4;

    rgb（255,0,0）;不透明度：0.6;

    rgb（255,0,0）;不透明度：0.8;

    以下示例显示了具有不透明度的不同元素：

    #p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 红与不透明度 */
                                #p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 绿色的不透明度*/
                                #p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 蓝色的不透明度 */
    尝试一下

  • 相关页面

    HTML教程：HTML样式

上一节:
下一节: