什么是 RGBA 和透明度？CSS 半透明颜色写法大全

一、Alpha 通道是什么

RGB 回答的是"这是什么颜色"，Alpha 回答的是"它有多透"。0 完全看不见，1 是实心，0.5 就是半透。

可以把它想成调色时多加的一个浓度旋钮：玻璃、水、烟雾，颜色本身没变，变的是这层"浓度"。

二、RGBA/HSLA 语法详解

在 RGB 后面再加一个用逗号隔开的数，就是 Alpha。注意范围是 0 到 1，不是 0–255，也不是百分比。

/* 黑色半透明蒙层 */
background: rgba(0, 0, 0, 0.5);

/* 同一个效果用 HSL 写 */
background: hsla(0, 0%, 0%, 0.5);

/* 8 位 HEX 也行 */
background: #00000080;  /* 80 ≈ 0.5 */

三种写法怎么选

• rgba()：最常见，习惯 RGB 的人上手最顺，兼容性也最稳。
• hsla()：需要顺手调亮度的时候用，配合 HSL 变量很自然。
• 8 位 HEX：写死样式、少打几个字的时候方便，但可读性差，别人接手容易看不懂。

三、opacity 与 rgba 的区别

这两个最容易混。opacity 管的是整个元素，rgba 只管当前这个颜色，作用层级不一样：

/* 文字也跟着变淡，多半不是你要的 */
.card { opacity: 0.5; }

/* 只有背景半透明，文字照常清楚 */
.card { background: rgba(0, 0, 0, 0.5); }

四、透明度叠层的常见坑

半透明用起来很顺手，但下面这几个坑基本人人都踩过。

• 两层 0.5 叠不出 1：叠在一起底下还是会透出来，看起来永远到不了实心。
• 滚动时背景穿帮：固定的半透明蒙层后面如果有内容在滚，会隐约透出来，通常不是设计想要的效果。
• 性能：大面积半透明会让浏览器多开合成层，低端机上可能掉帧，别滥用。
• 对比度：半透明文字压在花哨的背景上会看不清，该留的对比度还是要留。

五、半透明配色实例

下面是几个实际项目里常见的用法，可以照着改：

/* 玻璃拟态：半透底 + 浅描边 + 模糊 */
.glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

挑数值其实有规律：蒙层想压得住，就往 0.6 以上走；只是点缀、要若有若无，就压在 0.1–0.2。记住这个区间比背具体数字管用。