Как применить непрозрачность к цветовой переменной CSS?
Я разрабатываю приложение в электронном режиме, поэтому у меня есть доступ к переменным CSS. Я определил цветовую переменную в vars.css
:
:root {
--color: #f0f0f0;
}
Я хочу использовать этот цвет в main.css
, но при использовании некоторой непрозрачности:
#element {
background: (somehow use var(--color) at some opacity);
}
Как мне это сделать? Я не использую какой-либо препроцессор, а только CSS. Я бы предпочел ответ на все CSS, но я буду принимать JavaScript/jQuery.
Я не могу использовать opacity
, потому что я использую фоновое изображение, которое не должно быть прозрачным.
Ответы
Ответ 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 попробуйте следующее:
- Объявите свой цвет внутри: 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;
}