Вы не можете возьмите существующее значение цвета и примените к нему альфа-канал. А именно, вы не можете взять существующее шестнадцатеричное значение, такое как #f0f0f0, дать ему альфа-компонент и использовать полученное значение с другим свойством.
Однако, пользовательские свойства позволяют преобразовать шестнадцатеричное значение в триплет RGB для использования с rgba(), хранить это значение в настраиваемом свойстве (включая запятые!), Подставит это значение с помощью var() в rgba() функции с нужными альфа-значение, и она будет просто работать:
:root {
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
}
body {
color: #000;
background-color: #000;
}
#element {
background-color: rgba(var(--color), 0.5);
}
<p id="element">If you can see this, your browser supports custom properties.</p>
Это кажется почти слишком хорошо, чтобы быть правдой. Как это работает?
Волшебство заключается в том, что значения пользовательских свойств заменяются как при замене var() ссылки на значение свойства, до того, что значение свойства равно рассчитанному. Это означает, что в отношении пользовательских свойств значение --color в вашем примере не является значением цвета до a var(--color) выражение появляется где-то, что ожидает значения цвета (и только в этом контексте). Из section 2.1 из css-переменных spec:
Разрешенный синтаксис для настраиваемых свойств чрезвычайно разрешительный. Произведение декларации-значения соответствует любой последовательности одного или нескольких токенов, если последовательность не содержит < bad-string-token>, < bad-url-token>, непревзойденный <) -token>, <] - токен>, или <} -token>, или верхний уровень < Точка с точкой с запятой> токены или < delim-token> жетоны со значением "!".
Например, следующее является допустимым пользовательское свойство:
--foo: if(x > 5) this.width = 10;
Хотя это значение, очевидно, бесполезна в качестве переменной, как это было бы недействительным в любой нормальной собственности, она может читать и обрабатывать JavaScript.
И section 3:
Если свойство содержит один или несколько вара() функцию, и эти функции синтаксический действительно, грамматика всей собственности должен считаться действительным во время синтаксического анализа. Он проверяется только синтаксисом при вычисленном значении времени, после замены функций var().
Это означает, что значение 240, 240, 240 вы видите выше, получает замещенный непосредственно в rgba() функции перед тем вычисляется декларация. Так что это:
#element {
background-color: rgba(var(--color), 0.5);
}
который не представляется действительный CSS в первом, потому что rgba() ожидает не менее четыре разделенных запятые числовых значений, становится этим:
#element {
background-color: rgba(240, 240, 240, 0.5);
}
, который, конечно , является абсолютно корректным CSS.
Принимая это один шаг дальше, вы можете сохранить альфа-компонент в своей собственной настраиваемого свойства:
:root {
--color: 240, 240, 240;
--alpha: 0.5;
}
и заменить его, с тем же результатом:
#element {
background-color: rgba(var(--color), var(--alpha));
}
Это позволяет иметь различные альфа-значения, которые вы можете менять на лету.
Ну, это, если вы запускаете фрагмент кода в браузере, который не поддерживает пользовательские свойства.
Так звучит, что вы должны использовать более одного элемента .... – epascarello
Я бы предпочел не делать этого, но мне кажется, мне нужно ... :( – JoshyRobot