如何调整CSS纯色变量设置的背景不透明度且不改变变量原值

数据老陈

2026-8-28

实现CSS颜色变量透明度调整（不修改原始变量值）

需求背景

你已定义十六进制格式的全局CSS颜色变量，例如示例中的：

:root {
  --dark: #242424;
}

要求全程不修改该变量的原始取值，仅复用这个变量给固定定位的全屏遮罩设置0.8左右不透明度的背景，搭配backdrop-filter: blur(10px)实现下层内容模糊透出的毛玻璃效果。
待修改的原始代码如下：

p {
  padding: 40px;
  color: var(--dark);
}

div {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  background: var(--dark); /* 需要调整这行的背景透明度 */
  backdrop-filter: blur(10px);
}

<p>Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text, Just some dummy text</p>
<div class="backdrop"></div>

解决方案

直接使用原生CSS的color-mix()函数实现，不需要改动原有变量定义，也不需要额外拆分颜色通道：

函数会在指定色彩空间下按比例混合两种颜色
要实现0.8不透明度的背景，只需要将80%占比的原有变量色，和20%占比的透明色transparent混合即可
修改后的完整CSS代码：

:root {
  --dark: #242424;
}

p {
  padding: 40px;
  color: var(--dark);
}

div.backdrop {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  /* 复用原有变量实现0.8不透明度背景 */
  background: color-mix(in srgb, var(--dark) 80%, transparent);
  backdrop-filter: blur(10px);
}