Я разрабатываю приложение в электронном виде, поэтому у меня есть доступ к переменным 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.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

Это кажется слишком хорошим, чтобы быть правдой. ¹ Как это работает?

Волшебство заключается в том, что значения пользовательских свойств подставляются как есть при замене 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));
}

Это позволяет вам иметь различные альфа-значения, которые вы можете менять на лету.

¹ _{Хорошо, если вы запускаете фрагмент кода в браузере, который не поддерживает пользовательские свойства.}

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

Если вы используете, например, scss, ответ выше не даст результатов, потому что scss пытается скомпилировать стили с помощью специфичной для scss функции rgba () / hsla (), которая требует 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)'};
}

<div></div>

Обратите внимание, что интерполяция строк не будет работать для функций scss, не относящихся к CSS, например lighten(), потому что полученный код не будет функциональным CSS. Это все равно будет действительным scss, так что вы не получите ошибки при компиляции.

Я был в подобной ситуации, но , к сожалению , данные решения не работают для меня, так как переменные могут быть чем - либо от rgbдо hslдо hexили даже названий цветов.
Я решил эту проблему сейчас, применив background-colorи opacityк псевдо :afterили :beforeэлементу:

.container {
    position: relative;
}

.container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

Стили, возможно, придется немного изменить, в зависимости от элемента, к которому следует применить фон.
Также это может не работать для всех ситуаций, но, надеюсь, это поможет в некоторых случаях, когда другие решения не могут быть использованы.

Изменить: Я только что заметил, что это решение, очевидно, также влияет на цвет текста, так как он создает элемент перед целевым элементом и применяет к нему прозрачный фоновый цвет.
Это может быть проблемой в некоторых случаях.

Это действительно возможно с CSS . Это немного грязно, и вам придется использовать градиенты. В качестве примера я кодировал небольшой фрагмент, обратите внимание, что для темного фона следует использовать непрозрачность черного, как для светлого - белого.

: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;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

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

SCSS / SASS

Преимущество: вы можете просто использовать шестнадцатеричные значения цвета вместо 8-битного для каждого канала (0-255).

Вот как я сделал это с первоначальной идеей: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

Изменить: Вы также можете изменить альфа-функцию, чтобы просто использовать #{$color-name}-rgbи пропустить сгенерированные CSS-переменные * -r, * -g, * -b.

результат

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

Использование:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

Mixin и функции

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

Надеюсь, это сэкономит кому-то время.

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

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

<div id="a1">asdf</div>
<div id="a2">asdf</div>

Если вы не можете использовать это, и вы в порядке с решением javascript, вы можете использовать это:

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

Для использования rgba () с общей переменной css, попробуйте это:

1. Объявите свой цвет внутри: root, но не используйте rgb (), как это делают другие ответы. просто напишите значение

:root{
  --color : 255,0,0;
  }

2. Используйте переменную --color, используя var () в качестве других ответов

#some-element {
  color : rgba(var(--color),0.5);
}

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

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

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

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

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

:root {
--color: #F00;
}

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