为何带Alpha值的RGBA颜色会使Div透明？如何保留颜色且不透明？

你的CSS存在语法错误，正确的自定义属性调用方式是将变量传入颜色函数，而非反过来。针对你的需求，有两种可行方案：

方案1：保留RGB颜色，移除透明效果 #

如果需要让Div背景为实色（去掉Alpha值），直接使用rgb()函数调用变量即可——rgb()会自动忽略第四个Alpha参数，只提取前三个RGB值：

--color: 255, 144, 106, 0.18;
background: rgb(var(--color));

这样背景色会变为rgb(255,144,106)的实色，Div不再有透明效果。

方案2：保留背景半透明，但确保内容不透明 #

如果你的目标是保留背景的Alpha透明度，但Div内容不透明，只需将颜色函数改为rgba()即可（注意正确的调用顺序）：

--color: 255, 144, 106, 0.18;
background: rgba(var(--color));

此写法会让背景呈现半透明效果，但Div内的文字、元素等内容仍保持不透明状态，避免了opacity属性会影响整个元素的问题。

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