Как применить непрозрачность к цветовой переменной CSS?

Я разрабатываю приложение в электронном режиме, поэтому у меня есть доступ к переменным CSS. Я определил цветовую переменную в vars.css :

 :root { --color: #f0f0f0; } 

Я хочу использовать этот цвет в main.css , но с некоторой непрозрачностью:

 #element { background: (somehow use var(--color) at some opacity); } 

Как мне это сделать? Я не использую какой-либо препроцессор, а только CSS. Я бы предпочел ответ на все CSS, но я буду принимать JavaScript / jQuery.

Я не могу использовать opacity потому что я использую фоновое изображение, которое не должно быть прозрачным.

Вы не можете взять существующее значение цвета и применить к нему альфа-канал. А именно, вы не можете взять существующее шестнадцатеричное значение, такое как #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); } 
 

If you can see this, your browser supports custom properties.

Я знаю, что OP не использует препроцессор, но мне бы помогли, если бы здесь была приведена следующая информация (я еще не могу прокомментировать, иначе я бы прокомментировал ответ @BoltClock.

Если вы используете, например scss, ответ выше не будет выполнен, потому что scss пытается скомпилировать стили с помощью специальной функции rgba () / hsla (), специфичной для scss, для которой требуется 4 параметра. Однако rgba () / hsla () также являются встроенными функциями css, поэтому вы можете использовать интерполяцию строк для обхода функции scss.

Пример (действителен в sass 3.5.0+):

 :root { --color_rgb: 250, 250, 250; --color_hsl: 250, 50%, 50%; } div { /* This is valid CSS, but will fail in a scss compilation */ background-color: rgba(var(--color_rgb), 0.5); /* This is valid scss, and will generate the CSS above */ background-color: #{'rgba(var(--color_rgb), 0.5)'}; } 
 

Это действительно возможно с помощью CSS . Это немного грязно, и вам придется использовать gradleиенты. Я закодировал небольшой fragment в качестве примера, обратите внимание, что для темного фона вы должны использовать черную непрозрачность, как для светлых – белые:

 :root { --red: rgba(255, 0, 0, 1); --white-low-opacity: rgba(255, 255, 255, .3); --white-high-opacity: rgba(255, 255, 255, .7); --black-low-opacity: rgba(0, 0, 0, .3); --black-high-opacity: rgba(0, 0, 0, .7); } div { width: 100px; height: 100px; margin: 10px; } .element1 { background: linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element2 { background: linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element3 { background: linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element4 { background: linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } 
 
hello world
hello world
hello world
hello world

В CSS вы должны иметь возможность использовать значения rgba:

 #element { background: rgba(240, 240, 240, 0.5); } 

или просто установите непрозрачность:

 #element { background: #f0f0f0; opacity: 0.5; } 

Вы можете установить конкретную переменную / значение для каждого цвета – оригинал и тот, который имеет непрозрачность:

 :root { --color: #F00; --color-opacity: rgba(255, 0, 0, 0.5); } #a1 { background: var(--color); } #a2 { background: var(--color-opacity); } 
 
asdf
asdf
 :root{ --color: 255, 0, 0; } #element{ background-color: rgba(var(--color), opacity); } 

где вы заменяете непрозрачность чем-либо между 0 и 1

Если вы любите шестнадцатеричные цвета, как я, есть еще одно решение. Значение шестнадцатеричного значения равно 6 цифрам, после которого значение альфа. 00 100% прозрачность 99 составляет около 75%, тогда он использует алфавит «a1-af», а затем «b1-bf», заканчивающийся на «ff», который на 100% непрозрачен.

 :root { --color: #F00; } #element { background: var(--color)f6; } 

С помощью scss вы можете:

 rgba(color($colors, colorVar), 0.5); 
Давайте будем гением компьютера.