CSS颜色与透明度学习笔记

发表于 | 更新于 | 分类于

颜色

color与background-color

color 前景色。可以设置元素中文本的颜色。background-color 背景色。可以设置每个元素的背景色。HTML 中的每个元素都可以看成一个盒子，背景色即这个盒子的颜色。
color 与 background-color 都可以使用四种方式来指定颜色：颜色名、RGB值、16进制编码和HSL。

颜色名

设定颜色属性时可以直接使用颜色名（颜色关键字）。W3C定义了 16个颜色关键字：aqua（浅绿色）、black（黑色）、blue（蓝色）、 fuchsia （紫红色） 、gray（灰色） 、green（绿色） 、lime（黄绿色）、 maroon（褐红色） 、navy （深蓝色）、olive（茶青色 ）、purple（紫色）、red（红色）、silver（银色）、teal（青色）、 white（白色）和 yellow（黄色）。
16个颜色关键字及对应RGB值：

现在，多数浏览器支持更多颜色名即 X11颜色名

RGB与RGBA

用红（r）、绿（g）、蓝（b）三个颜色通道来表示颜色。
红、绿、蓝的值分别用0~255之间的数字或百分数来表示。(超出范围的数值将被截至其最接近的值)。

1
rgb(r, g, b)

rgb(255,0,0)与rgb(100%,0,0)都表示红色
rgba 相对于 rgb 增加了一个表示透明度的值，即alpha值，用0.0~1.0之间的数字表示。

1
rgba(r, g, b, a)

rgba 颜色只会作用于自身而不会作用于子元素

16进制编码

用红（r）、绿（g）、蓝（b）三个颜色通道来表示颜色。
红、绿、蓝分别用16进制编码来表示，即00~FF。

1
#rrggbb

#ff0000表示红色

HSL与HSLA

用色相（h）、饱和度（s）、明度（l）三个颜色通道来表示颜色。

1
hsl(h, s, l)

色相通过0°~360°之间的一个度数表示。

饱和度通过百分数表示。
明度通过百分数表示。0%为黑色，50%为标准色，100%为白色。

hsl(0,100%,50%)表示红色
hsla 与 rgba 一样增加了一个表示透明度的值，即alpha值，用0.0~1.0之间的数字表示。

1
hsla(h, s, l, a)

hsla 颜色只会作用于自身而不会作用于子元素

透明度

opacity 属性可以设置元素的不透明。

1
opacity: value;

  • value：取值在0~1之间，0为完全透明，1为完全不透明。

    opacity与alpha

    区别：
    opacity 会继承父元素的 opacity 属性，而 rgba 不会继承父元素属性，即 opacity 会影响其子元素透明度，而 rgba 只决定其自身透明度。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <body>
        <p>rgba</p>
        <div>
            <div class="squ box1">0</div>
            <div class="squ box2">0.1</div>
            <div class="squ box3">0.2</div>
            <div class="squ box4">0.3</div>
            <div class="squ box5">0.4</div>
            <div class="squ box6">0.5</div>
            <div class="squ box7">0.6</div>
            <div class="squ box8">0.7</div>
            <div class="squ box9">0.8</div>
            <div class="squ box10">0.9</div>
            <div class="squ box11">1</div>
        </div>
        <p style="clear:both;">opacity</p>
        <div>
            <div class="squ" style="opacity:0;background:#395692;">0</div>
            <div class="squ" style="opacity:0.1;background:#395692;">0.1</div>
            <div class="squ" style="opacity:0.2;background:#395692;">0.2</div>
            <div class="squ" style="opacity:0.3;background:#395692;">0.3</div>
            <div class="squ" style="opacity:0.4;background:#395692;">0.4</div>
            <div class="squ" style="opacity:0.5;background:#395692;">0.5</div>
            <div class="squ" style="opacity:0.6;background:#395692;">0.6</div>
            <div class="squ" style="opacity:0.7;background:#395692;">0.7</div>
            <div class="squ" style="opacity:0.8;background:#395692;">0.8</div>
            <div class="squ" style="opacity:0.9;background:#395692;">0.9</div>
            <div class="squ" style="opacity:1;background:#395692;">1</div>
        </div>
    </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.squ {
    width: 50px;
    height: 100px;
    float: left;}
.box1 {
    background: rgba(57, 86, 146, 0);}
.box2 {
    background: rgba(57, 86, 146, 0.1);}
.box3 {
    background: rgba(57, 86, 146, 0.2);}
.box4 {
    background: rgba(57, 86, 146, 0.3);}
.box5 {
    background: rgba(57, 86, 146, 0.4);}
.box6 {
    background: rgba(57, 86, 146, 0.5);}
.box7 {
    background: rgba(57, 86, 146, 0.6);}
.box8 {
    background: rgba(57, 86, 146, 0.7);}
.box9 {
    background: rgba(57, 86, 146, 0.8);}
.box10 {
    background: rgba(57, 86, 146, 0.9);}
.box11 {
    background: rgba(57, 86, 146, 1);}