Я использую переменные CSS для определения всех цветов на моей странице.
Затем переменная с именем --opac используется в альфа-канале каждого цвета для управления требуемым уровнем непрозрачности, если он отличается от значения по умолчанию, равного 1 (полностью непрозрачный).
Некоторым наложенным элементам требуется меньшая непрозрачность (с использованием тех же цветов).
Однако переопределение параметра --opac в области видимости .overlaid-div не меняет непрозрачность цвета, как предполагалось, вместо этого цвета сохраняют глобальное значение непрозрачности!
: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-color:var(--colourname)}.
Таким образом, хотя background-color:rgba(var(--whitergb),var(--opac)) будет работать, если добавить :root{--whitergb:0,0,0}, это не достаточно просто.
