Вы не можете взять существующее значение цвета и применить к нему альфа-канал. А именно, вы не можете принять существующее шестнадцатеричное значение, такое как#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.8);
}
<p id="element">If you can see this, your browser supports custom properties.</p>
Это кажется слишком хорошим, чтобы быть правдой. 1 Как это работает?
Волшебство заключается в том, что значения пользовательских свойств подставляются как есть при замене var()ссылок в значении свойства, прежде чем вычисляется значение этого свойства. Это означает, что в отношении пользовательских свойств значение --colorв вашем примере вообще не является значением цвета, пока не появится var(--color)выражение где-то, ожидающее значение цвета (и только в этом контексте). Из раздела 2.1 спецификации css-переменных:
Разрешенный синтаксис для пользовательских свойств чрезвычайно разрешающий. Продукция <объявление-значение> соответствует любой последовательности из одного или нескольких токенов, при условии, что последовательность не содержит <bad-string-token>, <bad-url-token>, unmatched <) - token>, <] - token>, или <} - token>, или токены верхнего уровня <точка с запятой>, или токены <delim-token> со значением «!».
Например, следующее является допустимым пользовательским свойством:
--foo: if(x > 5) this.width = 10;
Хотя это значение, очевидно, бесполезно в качестве переменной, поскольку оно будет недопустимым в любом обычном свойстве, оно может быть прочитано и обработано JavaScript.
И раздел 3 :
Если свойство содержит одну или несколько функций var (), и эти функции синтаксически допустимы, грамматика всего свойства должна считаться действительной во время анализа. Он проверяется только на синтаксис во время вычисленного значения, после замены функций var ().
Это означает, что 240, 240, 240значение, которое вы видите выше, подставляется непосредственно в rgba()функцию до вычисления объявления. Итак, это:
#element {
background-color: rgba(var(--color), 0.8);
}
который на первый взгляд не выглядит допустимым CSS, потому что rgba()ожидает не менее четырех числовых значений, разделенных запятыми, становится следующим:
#element {
background-color: rgba(240, 240, 240, 0.8);
}
что, конечно же, является совершенно правильным CSS.
Сделав еще один шаг вперед, вы можете сохранить альфа-компонент в его собственном пользовательском свойстве:
:root {
--color: 240, 240, 240;
--alpha: 0.8;
}
и подставим его с тем же результатом:
#element {
background-color: rgba(var(--color), var(--alpha));
}
Это позволяет вам иметь различные альфа-значения, которые вы можете менять на лету.
1 Хорошо, если вы запускаете фрагмент кода в браузере, который не поддерживает пользовательские свойства.