Chrome 152 相对 alpha 颜色进入稳定版：CSS 主题透明度写法与兼容判断

Chrome 152 在 2026 年 8 月 25 日进入稳定版，Web 平台更新里有一项很容易被“新 API”标题带过：相对 alpha 颜色。它不是再定义一套主题色，而是允许 CSS 从已有颜色出发，只改透明度。对按钮悬停层、遮罩和同色系边框来说，这比复制一串 RGB 值更不容易漂移。

Chrome 152 这项变化解决的是主题色重复维护

过去常见的写法是把主题色拆成变量，再为半透明版本另存一份 RGB：

:root {
  --brand: #2563eb;
  --brand-soft: rgba(37, 99, 235, 0.14);
}

.notice {
  color: var(--brand);
  background: var(--brand-soft);
}

问题在于主题色一旦换成紫色或深青色，--brand 和 --brand-soft 很容易只改了一处。Chrome 152 的 Release Notes 将 relative alpha colors 描述为“引用一个源颜色、只修改 alpha 通道”，它更适合表达“同一个颜色的浅层叠加”。

alpha() 的最小写法：从一个颜色派生透明层

可以把源颜色直接写进 alpha()，也可以引用 CSS 自定义属性。下面的例子让提示框沿用品牌蓝，只把不透明度降到 14%：

:root {
  --brand: oklch(55% 0.22 255);
}

.notice {
  color: var(--brand);
  background: alpha(var(--brand) / 14%);
  border: 1px solid alpha(var(--brand) / 32%);
}

这里的三个实体关系很简单：--brand 是 origin color，alpha() 只改变透明度，.notice 同时消费实色文字和透明背景。颜色空间如何解析、百分比的允许范围等细节应以 CSS Color 5 规范和目标浏览器实现为准，不要把它当成把任意颜色通道重新计算的函数。

透明度不是越低越好：先看叠加场景和文字对比

相对 alpha 最适合背景层、边框和遮罩，不适合把正文颜色直接降到很淡。一个实践中的检查表如下：

尤其是同一个变量既给文字又给背景时，不能只把 alpha 调低来“统一风格”。文字应保持足够实，透明版本留给容器层；如果组件跨浅色、深色两套背景，最好分别做可见状态检查。

用 @supports 给旧浏览器留下明确降级

业界新闻真正有价值的部分，不只是知道 Chrome 152 支持什么，还要知道什么时候可以落地。项目仍有旧浏览器时，可以先提供稳定的实色或传统 rgba()，再用能力查询覆盖：

.notice {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(37, 99, 235, 0.32);
}

@supports (color: alpha(blue / 50%)) {
  .notice {
    color: var(--brand);
    background: alpha(var(--brand) / 14%);
    border-color: alpha(var(--brand) / 32%);
  }
}

降级值要和新写法尽量接近，而不是把不支持的语法直接写在唯一声明里。灰度时重点观察三个状态：正常提示、悬停或聚焦、深色背景下的提示。只要任一状态丢失边界或文字对比不足，就先保留旧写法。

这项稳定版变化适合哪些前端项目

设计令牌较多、主题会动态切换的组件库最容易从中受益，因为“实色变量”和“透明派生色”终于可以放在同一条语义链上。一次性页面或只支持单一浏览器的内部工具，也可以直接试用，但仍建议把兼容策略写进组件说明。

Chrome 152 的稳定支持不等于所有浏览器同时支持。发布前用目标浏览器矩阵验证 alpha()，并保留 @supports 分支；CSS 解析失败时，浏览器会跳过该条声明，最怕的是开发者没有准备一个可见的后备颜色。

相关问题

alpha() 和 rgba() 是替代关系吗？

不是完全替代。rgba() 直接写颜色通道和 alpha，alpha() 更强调从已有颜色派生透明度；兼容范围和团队浏览器基线决定是否切换。

可以用 alpha() 调整图片透明度吗？

它处理的是颜色值，不是给图片元素设置整体透明度。图片整体透明度仍应使用 opacity 或对应的图像处理方式。

为什么写了 alpha() 却没有颜色？

先检查声明是否被目标浏览器解析，再确认自定义属性本身是合法颜色。若能力不支持，确保前面已有实色或 rgba() 后备声明。

发布前的三项检查

把这项更新带进生产环境前，至少做一次语法解析检查、三种背景状态检查和一次浏览器矩阵回归。结论很朴素：把 alpha 当作主题色的派生关系来管理，能减少重复值；把它当作“更时髦的透明度写法”，收益就没有那么大。