2026-Css忘掉一切、归零再启-alpha和opacity

要写代码2026-06-02 10:13

alpha通道和opacity半透明效果

区别

`1. alpha通道控制的更为精细,控制"单个元素""单个属性"的透明度（例如：单独控制文字透明或背景透明）`

`2. opacity控制"整个"标签内的所有元素的透明度`

左示例复制代码

.left {
        background-color: rgba(52, 152, 219, 0.5);
    }

右示例复制代码

.right {
        background-color: rgba(52, 152, 219);
        opacity: 0.5;
    }

源码复制代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="content left">
            alpha 通道
        </div>
        <div class="content right">
            opacity
        </div>
    </div>
</body>
<style>
    * {
        height: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }



    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

    }


    .content {
        align-content: center;
        width: 200px;
        height: 200px;
        font-size: 30px;
        text-align: center;
        padding: 5px;
        border: 10px solid orange;


    }

    .left {
        background-color: rgba(52, 152, 219, 0.5);
    }

    .right {
        background-color: rgba(52, 152, 219);
        opacity: 0.5;
    }
</style>

</html>