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

Ответ 1

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

Ответ 2

Я знаю, что 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)'};
}

<div></div>

Ответ 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>

Ответ 4

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

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

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

Ответ 5

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

.container {
    position: relative;
}

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

:root {
--color: #F00;
}

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