Question

我正在使用CSS变量来定义页面中的所有颜色。

然后，当每种颜色的alpha通道与默认值1（完全不透明）不同时，将在每个颜色的alpha通道中使用一个名为--opac的变量来控制所需的不透明度。

某些重叠元素需要的不透明度（使用相同颜色）较少。

但是，在.overlaid-div范围内重新定义--opac并不会按预期改变颜色的不透明度，而是保留了全局不透明度值！

:root{
   --white:rgba(255,255,255,var(--opac));
   --blue:rgba(0,0,255,var(--opac));
   /*etc....*/

   --opac:1 /*this is the default opacity*/
}
.overlaid-div {
   --opac:0.8;
   background-color:var(--white);
}

#particular-overlaid-div {
   --opac:0.4;
   background-color:var(--white);
}

/* etc... */

<html>

<body style="background-color:darkblue; color:turquoise">
<div style="background-color:white">A default element</div>
<div class="overlaid-div">An overlaid element (should be slightly transparent)</div>
<div id="particular-overlaid-div">A particular overlaid element (should be very transparent)</div>
</body>
</html>

此外，我尝试在不同深度插入calc（），以查看是否会强制更新，但没有成功。

理想的解决方案是使用纯CSS（没有JS或预处理器），并使每个叠加项中的颜色访问保持简单，例如{background-colour：var（-colourname）}。

因此，虽然background-colour：rgba（var（-whitergb），var（-opac））可以工作，但是如果添加了：root {-whitergb：0,0,0}，这并不简单足够。

如何级联可变的rgba alpha值（在命名的颜色变量内）

0 个答案: