CSS颜色与透明度详解-优快云博客

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/75303034

颜色的表达方式 red、rgb(,,) 、#ffff00

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

Red、Green、Blue、Alpha即RGBA

R、G、B 取值范围0~255,A为透明度参数，取值在0~1之间，不可为负值。

Hue、Saturation、Lightness、Alpha即HSLA

不同的颜色表示方法其取值也不相同，具体如下：

H 色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色

S 饱和度取值范围0%~100%

L 亮度取值范围0%~100%

A 透明度取值范围0~1

RGBA、HSLA可应用于所有使用颜色的地方。

background-color: rgba(100, 200, 20, 0.5);

background-color:hsla(100, 80%, 80%, 0.5);

关于CSS透明度：

1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；

2 、transparent 不可调节透明度，始终完全透明

div {

background: red;

}

.test {

/* background: opacity;*/

background:transparent;

}

<divclass="test">看看各带color的属性设置为transparent时的效果</div>

p:nth-of-type(5) { visibility:hidden;} 隐藏，原来位置会被保留

p:nth-of-type(6){ display:none;} 隐藏，原来位置不会被保留

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            /* RGBA:rgb取值是0-255，A:透明度 0-1 0：透明 1：不透明*/
            /*            background-color: rgba(255, 34, 56, 1);*/
            /*HSLA:H:色调 0-360 0/360表示红色 120：绿色 240：蓝色
                   S：饱和度 0%-100%
                   L：亮度 0%-100%
                   A：透明度*/
            background-color: hsla(360, 50%, 20%, 0.5);
        }
        
        div {
            /*            background: red;*/
        }
        /*透明度设置：opacity：设置透明，但是要收到父盒子的影响
                    transparent：设置透明，不受父盒子影响*/
        
        .test {
            background: opacity;
            /*background: transparent;*/
        }
        
        .test {}
    </style>
</head>

<body>
    <!--    <div class="box1"></div>-->
    <div class="test">看看各带color的属性设置为transparent时的效果</div>
</body>

</html>

3：颜色