css 透明色

作者：苏染瞳° 发布日期:2025-08-08 浏览:66

/* 使用透明色的示例代码 */

/* 1. 使用 rgba() 函数设置透明度 */
div {
    background-color: rgba(255, 0, 0, 0.5); /* 红色，透明度为 50% */
}

/* 2. 使用 hsla() 函数设置透明度 */
p {
    background-color: hsla(120, 100%, 50%, 0.3); /* 绿色，透明度为 30% */
}

/* 3. 使用透明关键字 */
span {
    background-color: transparent; /* 完全透明 */
}

/* 4. 使用十六进制颜色代码加透明度（CSS 变量） */
button {
    background-color: #ff000080; /* 红色，透明度为 50% */
}

解释说明：

rgba() 和 hsla() 函数允许你通过第四个参数设置颜色的透明度（alpha 值），范围从 0（完全透明）到 1（完全不透明）。
transparent 是一个关键字，表示完全透明的颜色。
十六进制颜色代码可以附加两个额外的字符来表示透明度（例如：#RRGGBBAA），其中最后两位表示 alpha 值。

上一篇：position在css中的用法

下一篇：css超出显示省略号