如何用CSS函数将白色背景上的rgba/hsla转为不透明rgb/hsl？

没问题，color-mix() 就是专门解决这类需求的CSS函数。半透明颜色在白色背景上呈现的视觉效果，本质是该颜色与白色按透明度比例混合后的结果，我们可以直接用color-mix()模拟这个叠加过程，得到对应的不透明等效色。

实现代码 #

直接修改你的CSS中.solid类的背景属性即可：

body {
  background: repeating-linear-gradient(
    45deg,
    lightgray 0px 2px,
    white 2px 12px
  );
  --background-primary: rgba(31, 198, 149, 0.5);
}

.box {
  width: 200px;
  height: 50px;
  margin-top: 10px;
}

.transparent {
  background: var(--background-primary);
}

.solid {
  /* 用color-mix混合半透明色与白色，自动生成不透明等效色 */
  background: color-mix(in srgb, var(--background-primary), white);
}

对应的HTML部分保持不变：

<body>
  <div class="box transparent">
    rgba(31, 198, 149, 0.5)
  </div>
  <div class="box solid">
    rgb(143, 227, 202)
  </div>
</body>

原理说明 #

color-mix(in srgb, 颜色A, 颜色B)会按照颜色的透明度比例自动计算混合后的结果：

• 对于你给出的示例rgba(31, 198, 149, 0.5)，它表示50%的原颜色 + 50%的白色背景
• 每个颜色通道的计算方式为：原通道值 * alpha + 255 * (1 - alpha)，比如红色通道：31*0.5 + 255*0.5 = 143，和你给出的目标rgb值完全匹配

如果你的背景色不是纯白，只需要把color-mix()里的white替换成对应的背景色即可，这个函数在现代浏览器中都能正常使用。

内容的提问来源于stack exchange，提问作者Anton Fil