zoukankan      html  css  js  c++  java
  • css颜色与透明度

     

    1、  css颜色

    css颜色由红、绿、蓝三种基色叠加而来。

    1.1   rgb:

    rgb(red、green、blue)三原色组成,根据这三种颜色组合的不同发光度获取。取值0-255,每个值有256阶,由低到高,0最低,255最高。那总共的组合数是:256×256×256=16777216 种颜色。

    示例:rgb(0,0,0) 黑色,rgb(255,0.0) 红色,rgb(255,192,203) 粉红色

    1.2   rgba:

    rgba颜色值是这样规定的:rgba(red, green, blue, alpha),比ragb多一个alpha(透明度)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

    示例:rgba(47,222,151,0.3)

    1.3   十六进制色

    十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

    示例:#000000黑色,css中可以缩写为#000。#ffffff/#fff 白色。#0000ff 蓝色

    十六进制颜色表示法6位数字或字母组成,前面加2位表示透明度,取值00-FF。

    示例:#7F0000ff 50%透明

    透明度参照表:

    00%

    FF(不透明)

    50%

    7F

    5%

    F2

    55%

    72

    10%

    E5

    60%

    66

    15%

    D8

    65%

    59

    20%

    CC

    70%

    4c

    25%

    BF

    75%

    3F

    30%

    B2

    80%

    33

    35%

    A5

    85%

    21

    40%

    99

    90%

    19

    45%

    8c

    95%

    0c

     

     

    100%

    00(全透明)

    1.4   hsl颜色

    HSLA指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

    HSLA颜色值是这样规定的:hsl(hue, saturation, lightness)。

    Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

    1.5   hsla颜色

    HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

    2、  opacity透明度

    颜色的透明度前面已经介绍过,在css中opacity设置html元素的透明度。

    • opacity: value|inherit;

    value

    规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。

    inherit

    应该从父元素继承 opacity 属性的值。

    rgba的设置的透明度不会被子级元素继承;opacity设置的透明度会被子级元素继承。

     

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style>
    
    div
    
    {
    
     width:200px;
    
     margin:20px;
    
     padding:10px;
    
    }
    
    .d1
    
    {
    
     background-color:rgba(255,0,0,0.5);
    
    }
    
    .d2
    
    {
    
     background-color:rgb(255,0,0);
    
     opacity:0.5;
    
     filter:alpha(opacity=100); /* For IE8 and earlier */
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="d1">RGBA</div>
    
    <div class="d2">opacity 字体也变透明了</div>
    
    </body>
    
    </html>
    View Code

     

     

  • 相关阅读:
    OCP-1Z0-053-V12.02-40题
    OCP-1Z0-053-V12.02-255题
    OCP-1Z0-053-V12.02-407题
    OCP-1Z0-053-V12.02-298题
    OCP-1Z0-053-V12.02-38题
    OCP-1Z0-053-V12.02-274题
    OCP-1Z0-053-V12.02-159题
    OCP-1Z0-053-V12.02-406题
    OCP-1Z0-053-V12.02-369题
    OCP-1Z0-053-V12.02-610题
  • 原文地址:https://www.cnblogs.com/tongyi/p/13632880.html
Copyright © 2011-2022 走看看